:root { --v2-bg: #f3f6fa; --v2-surface: #ffffff; --v2-text: #182230; --v2-muted: #667085; --v2-border: #e5eaf1; --v2-blue: #1268f3; --v2-blue-soft: #edf4ff; --v2-green: #12a46f; --v2-orange: #f59e0b; --v2-red: #ef4444; --v2-shadow: 0 8px 28px rgba(25, 45, 74, 0.055); --v2-radius: 12px; } * { box-sizing: border-box; } body { margin: 0; background: var(--v2-bg); color: var(--v2-text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --semi-color-primary: #1268f3; --semi-color-primary-hover: #0e5ddc; --semi-color-primary-active: #0b4fbd; --semi-color-primary-light-default: #edf4ff; --semi-color-primary-light-hover: #e1edff; --semi-color-primary-light-active: #d3e4ff; --semi-color-border: #e5eaf1; --semi-color-bg-0: #f3f6fa; --semi-color-bg-1: #ffffff; --semi-color-bg-2: #ffffff; --semi-color-text-0: #182230; --semi-color-text-1: #344054; --semi-color-text-2: #667085; --semi-color-text-3: #98a2b3; --semi-border-radius-small: 8px; --semi-border-radius-medium: 10px; --semi-border-radius-large: 14px; --semi-shadow-elevated: 0 20px 60px rgba(24, 34, 48, .16); } button, input, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } .v2-monitor-return { display: flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 12px; border: 1px solid #cfe0f6; border-radius: 9px; background: linear-gradient(90deg,#f2f7ff,#fff); padding: 6px 10px; color: #51637b; box-shadow: 0 3px 12px rgba(31,69,119,.06); font-size: 9px; } .v2-monitor-return a { display: inline-flex; height: 28px; flex: 0 0 auto; align-items: center; gap: 5px; border-radius: 7px; background: #1769d2; padding: 0 10px; color: #fff; text-decoration: none; font-weight: 700; } .v2-monitor-return span { display: inline-flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-return em { margin-left: auto; flex: 0 0 auto; color: #78869a; font-size: 8px; font-style: normal; } .v2-track-page > .v2-monitor-return { z-index: 30; grid-column: 1 / -1; } .v2-auth-screen { display: grid; min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(360px, 1.15fr) minmax(420px, .85fr); align-items: center; background: radial-gradient(circle at 16% 12%, rgba(18,104,243,.09), transparent 28%), #f3f6fa; padding: clamp(28px, 5vw, 80px); } .v2-auth-intro { max-width: 680px; padding: 36px 8vw 36px 4vw; } .v2-auth-intro > img { width: 176px; } .v2-auth-intro h1 { margin: 54px 0 20px; color: #14223a; font-size: clamp(38px, 4vw, 60px); font-weight: 720; line-height: 1.12; letter-spacing: -.055em; } .v2-auth-intro > .semi-typography { display: block; max-width: 540px; color: #617087; font-size: 16px; line-height: 1.9; } .v2-auth-intro > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .v2-auth-intro > div .semi-tag { height: 30px; border-radius: 999px; padding: 0 12px; font-size: 12px; font-weight: 650; } .v2-auth-card { width: min(440px, 100%); overflow: hidden; border: 1px solid rgba(218,226,237,.92); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 28px 80px rgba(21, 32, 51, .12); backdrop-filter: blur(16px); } .v2-auth-loading { grid-column: 1 / -1; justify-self: center; } .v2-auth-loading .semi-card-body { display: flex; min-height: 260px; align-items: center; justify-content: center; flex-direction: column; gap: 16px; } .v2-auth-form { display: flex; flex-direction: column; align-items: stretch; padding: 42px; } .v2-auth-logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; } .v2-auth-form > h3 { margin: 2px 0 0; text-align: center; font-size: 25px; letter-spacing: -.035em; } .v2-auth-form > h3 + .semi-typography { margin: 11px 0 18px; text-align: center; font-size: 13px; line-height: 1.7; } .v2-auth-form label { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; color: #44536a; font-size: 13px; font-weight: 650; } .v2-auth-form label .semi-input-wrapper { height: 46px; border-radius: 9px; } .v2-auth-form > .semi-typography-danger { margin-top: 12px; font-size: 12px; } .v2-auth-form > .semi-button-primary { height: 46px; margin-top: 22px; border-radius: 9px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(18,104,243,.18); } .v2-auth-form .v2-auth-mode-switch { height: 36px; margin-top: 8px; color: #68778c; font-size: 12px; font-weight: 600; } .v2-auth-form > .semi-typography-tertiary { margin-top: 14px; text-align: center; } .v2-shell { height: 100vh; height: 100dvh; overflow: hidden; background: var(--v2-bg); } .v2-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; contain: layout paint; display: flex; width: 208px; max-width: none; flex: none; flex-direction: column; border-right: 1px solid var(--v2-border); background: #fff; } .v2-brand { display: flex; height: 68px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 0 18px; white-space: nowrap; overflow: hidden; } .v2-brand-logo { display: block; width: 142px; height: auto; flex: 0 0 auto; } .v2-brand-symbol { display: none; width: 36px; height: auto; flex: 0 0 36px; } .v2-navigation { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 10px; } .v2-nav-item { position: relative; display: flex; height: 44px; align-items: center; gap: 12px; border-radius: 8px; padding: 0 14px; color: #59677c; text-decoration: none; white-space: nowrap; overflow: hidden; font-size: 13px; font-weight: 600; transition: background .16s, color .16s, transform .16s; } .v2-nav-item:hover { background: #f7f9fc; color: var(--v2-text); } .v2-nav-item.is-active { background: var(--v2-blue-soft); color: var(--v2-blue); box-shadow: inset 0 0 0 1px rgba(18,104,243,.05); } .v2-nav-item.is-active::before { position: absolute; left: 0; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--v2-blue); content: ""; } .v2-nav-operations { margin: 0 10px 8px; } .v2-collapse { display: flex; width: 100%; height: 50px; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 10px; border-radius: 0; border-top: 1px solid var(--v2-border); padding: 0 22px; color: #64748b; } .v2-main { display: flex; width: auto; height: 100vh; height: 100dvh; min-width: 0; flex: 1; flex-direction: column; margin-left: 208px; } .v2-topbar { position: sticky; top: 0; z-index: 40; display: flex; height: 68px; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(229,234,241,.92); background: rgba(255,255,255,.92); padding: 0 24px; backdrop-filter: blur(16px); } .v2-topbar-title { display: flex; flex-direction: column; gap: 1px; } .v2-topbar-title h4 { margin: 0; font-size: 20px; letter-spacing: -.035em; } .v2-topbar-title > .semi-typography { font-size: 10px; } .v2-topbar-actions { display: flex; align-items: center; gap: 4px; } .v2-topbar-actions > .semi-button { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px; color: #64748b; } .v2-help-sheet .semi-sidesheet-header { border-bottom: 1px solid var(--v2-border); padding: 18px 20px; } .v2-help-sheet .semi-sidesheet-title h4 { margin: 2px 0 0; font-size: 19px; } .v2-help-panel { padding: 2px 0; } .v2-help-panel > .semi-typography { display: block; margin: 0 0 16px; font-size: 13px; line-height: 1.7; } .v2-help-panel ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .v2-help-panel li { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 10px; border-radius: 10px; background: #f7f9fc; padding: 12px; color: #435168; font-size: 12px; line-height: 1.65; } .v2-help-panel li > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 10px; font-weight: 800; } .v2-help-panel > footer { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: #8996a8; font-size: 10px; } .v2-help-panel kbd { border: 1px solid #dce4ef; border-radius: 4px; background: #fff; padding: 2px 5px; color: #59677c; font-family: inherit; } .v2-current-user { display: flex; align-items: center; gap: 7px; margin: 0 5px; color: #59677c; font-size: 11px; }.v2-current-user b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-role-badge { border-radius: 10px; background: var(--v2-blue-soft); padding: 2px 6px; color: var(--v2-blue); font-size: 9px; } .v2-topbar-actions .v2-current-user { display: flex; width: auto; height: 36px; border-radius: 9px; padding: 0 8px; } .v2-account-chevron { color: #98a2b3; font-size: 12px; transition: transform .16s ease; } .v2-current-user[aria-expanded="true"] { background: #f2f6fc; color: #344054; } .v2-current-user[aria-expanded="true"] .v2-account-chevron { transform: rotate(180deg); } .v2-account-dropdown { min-width: 250px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 18px 46px rgba(24, 34, 48, .16); } .v2-account-dropdown .semi-dropdown-menu { padding: 0; } .v2-account-dropdown-profile { display: grid; min-width: 236px; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-radius: 9px; background: linear-gradient(135deg, #f8fbff 0%, #f3f7fd 100%); padding: 10px; } .v2-account-dropdown-profile > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .v2-account-dropdown-profile strong, .v2-account-dropdown-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-account-dropdown-profile strong { color: #25364d; font-size: 12px; } .v2-account-dropdown-profile small { color: #8491a3; font-size: 10px; font-weight: 500; } .v2-account-dropdown-profile .semi-tag { flex: 0 0 auto; } .v2-account-dropdown .semi-dropdown-divider { margin: 6px 2px; } .v2-account-dropdown .semi-dropdown-item { min-height: 38px; border-radius: 8px; color: #4e5f75; font-size: 12px; font-weight: 600; } .v2-account-dropdown .semi-dropdown-item:hover { background: #f4f7fb; } .v2-password-mobile { display: none !important; } .v2-password-modal .semi-modal-content { border-radius: 16px; } .v2-password-dialog { display: flex; flex-direction: column; } .v2-password-dialog > .semi-typography { margin-bottom: 4px; } .v2-password-dialog > label { display: flex; flex-direction: column; gap: 7px; margin-top: 15px; color: #5a6980; font-size: 12px; font-weight: 650; } .v2-password-dialog > label .semi-input-wrapper { height: 42px; border-radius: 8px; } .v2-password-dialog > .semi-typography-danger { margin-top: 10px; font-size: 11px; } .v2-password-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; } .v2-role-notice { margin: 6px 0; border-radius: 6px; background: #f6f8fb; padding: 8px; color: var(--v2-muted); font-size: 8px; line-height: 1.5; } .v2-content { min-width: 0; min-height: 0; flex: 1; overflow: auto; } .v2-sidebar.is-collapsed { width: 72px; } .v2-sidebar.is-collapsed + .v2-main { margin-left: 72px; } .v2-sidebar.is-collapsed .v2-nav-label, .v2-sidebar.is-collapsed .v2-collapse span { display: none; } .v2-sidebar.is-collapsed .v2-brand { justify-content: center; padding: 0; } .v2-sidebar.is-collapsed .v2-brand-logo { display: none; } .v2-sidebar.is-collapsed .v2-brand-symbol { display: block; } .v2-sidebar.is-collapsed .v2-nav-item { justify-content: center; padding: 0; } .v2-sidebar.is-collapsed .v2-collapse { justify-content: center; padding: 0; transform: rotate(180deg); } .v2-monitor-page { display: flex; height: 100%; min-height: 0; overflow: hidden; flex-direction: column; gap: clamp(10px, 1vh, 14px); padding: clamp(10px, 1vw, 18px); } .v2-filterbar.semi-card { overflow: visible; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-filterbar > .semi-card-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(120px, 150px) minmax(120px, 150px) auto auto auto auto; gap: 10px; padding: 10px 12px; } .v2-search-field { display: flex; height: 36px; align-items: center; gap: 8px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 10px; color: #8a98aa; } .v2-search-field:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--v2-text); font-size: 12px; } .v2-search-field.is-batch { border-color: #9fc0f7; background: #fbfdff; } .v2-search-batch-count { flex: 0 0 auto; border-radius: 999px; background: var(--v2-blue-soft); padding: 3px 7px; color: var(--v2-blue); font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; } .v2-search-batch-count.has-missing { background: #fff4e5; color: #b45309; } .v2-search-batch-action { flex: 0 0 auto; border: 0; border-left: 1px solid #dce4ef; background: transparent; padding: 0 2px 0 10px; color: var(--v2-blue); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; } .v2-search-batch-action:hover { color: #124ea1; } .v2-batch-search-backdrop { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; background: rgba(15, 27, 46, .4); padding: 20px; backdrop-filter: blur(3px); } .v2-batch-search-dialog { width: min(520px, 100%); border: 1px solid rgba(255,255,255,.75); border-radius: 14px; background: #fff; padding: 20px; box-shadow: 0 24px 70px rgba(13, 33, 62, .24); } .v2-batch-search-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .v2-batch-search-dialog > header div { display: grid; gap: 4px; } .v2-batch-search-dialog > header strong { color: #17253a; font-size: 17px; } .v2-batch-search-dialog > header span { color: #728096; font-size: 12px; } .v2-batch-search-dialog > header button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 7px; background: #f3f6fa; color: #627086; cursor: pointer; } .v2-batch-search-dialog > label { display: block; margin-bottom: 8px; color: #536176; font-size: 12px; font-weight: 600; } .v2-batch-search-dialog textarea { display: block; width: 100%; min-height: 210px; resize: vertical; border: 1px solid #ccd8e7; border-radius: 9px; background: #fbfcfe; padding: 12px 14px; color: #1d2a3d; outline: 0; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .v2-batch-search-dialog textarea:focus { border-color: #4386df; background: #fff; box-shadow: 0 0 0 3px rgba(45, 116, 210, .1); } .v2-batch-search-summary { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: #758297; font-size: 11px; } .v2-batch-search-summary strong { color: var(--v2-blue); font-size: 13px; } .v2-batch-search-summary em { color: #8994a5; font-style: normal; } .v2-batch-search-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .v2-batch-search-dialog > footer button { min-width: 92px; } .v2-batch-search-dialog > footer button:disabled { opacity: .45; cursor: not-allowed; } .v2-filterbar select { height: 36px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 30px 0 11px; color: #4d5c70; outline: 0; font-size: 12px; } .v2-filter-live-status { display: flex; height: 36px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d9e8fb; border-radius: 7px; background: #f5f9ff; padding: 0 11px; color: #3568a9; font-size: 11px; font-weight: 700; white-space: nowrap; } .v2-filter-live-status svg { color: var(--v2-blue); } .v2-primary-button, .v2-secondary-button { display: flex; height: 36px; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; } .v2-primary-button { border: 1px solid var(--v2-blue); background: var(--v2-blue); color: #fff; box-shadow: 0 5px 12px rgba(18,104,243,.18); } .v2-secondary-button { border: 1px solid #dce4ef; background: #fff; color: #59677c; } .v2-monitor-mode { display: flex; height: 36px; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #f7f9fc; padding: 2px; } .v2-monitor-mode button, .v2-monitor-mobile-entry { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 5px; background: transparent; padding: 0 10px; color: #65758a; font-size: 12px; cursor: pointer; white-space: nowrap; } .v2-monitor-mode button.is-active { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 4px rgba(21,32,51,.12); font-weight: 700; } .v2-monitor-mobile-entry { height: 36px; border: 1px solid #dce4ef; background: #fff; } .v2-kpis.semi-card { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-kpis > .semi-card-body { display: grid; grid-template-columns: 1.12fr 1.12fr repeat(4, minmax(86px, 1fr)) 1.05fr .9fr; padding: 0; } .v2-kpi { position: relative; min-width: 0; min-height: 72px; padding: 12px 14px; } .v2-kpi + .v2-kpi::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ""; } .v2-kpi small { display: block; color: var(--v2-muted); font-size: 11px; font-weight: 600; } .v2-kpi strong { display: block; margin-top: 7px; overflow: hidden; color: var(--v2-text); font-size: clamp(21px, 1.6vw, 27px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-kpi strong em { margin-left: 4px; color: #93a0b1; font-size: 9px; font-style: normal; font-weight: 600; } .v2-kpi.is-primary strong { font-size: clamp(25px, 1.9vw, 32px); font-weight: 750; letter-spacing: -.025em; } .v2-kpi.is-support { background: #fafbfd; } .v2-kpi.is-support small { color: #8a96a6; font-size: 10px; font-weight: 500; } .v2-kpi.is-support strong { margin-top: 8px; color: #718095; font-size: clamp(16px, 1.2vw, 20px); font-weight: 650; } .v2-kpi.is-support strong em { font-size: 8px; } .v2-kpi.is-online strong, .v2-kpi.is-idle strong { color: var(--v2-green); } .v2-kpi.is-driving strong { color: var(--v2-blue); } .v2-kpi.is-alert strong { color: var(--v2-red); } .v2-kpi.is-offline strong, .v2-kpi.is-missing strong { color: #7b8798; } .v2-monitor-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(21,32,51,.04); } .v2-monitor-workspace.is-detail-open { grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr) clamp(340px, 20vw, 420px); } .v2-monitor-workspace.is-detail-collapsed { grid-template-columns: clamp(244px, 14vw, 300px) minmax(480px, 1fr) 44px; } .v2-vehicle-rail { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--v2-border); } .v2-vehicle-rail > header { display: flex; height: 46px; align-items: center; justify-content: space-between; padding: 0 12px; } .v2-vehicle-rail > header strong { font-size: 13px; } .v2-vehicle-rail > header span, .v2-vehicle-rail > footer { color: var(--v2-muted); font-size: 10px; } .v2-rail-search { display: flex; height: 34px; align-items: center; gap: 7px; margin: 0 9px 8px; border: 1px solid var(--v2-border); border-radius: 7px; padding: 0 9px; color: #8a98aa; font-size: 10px; } .v2-rail-search.has-missing { border-color: #fed7aa; background: #fffaf3; color: #b45309; } .v2-vehicle-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-vehicle-row.semi-button { display: grid; width: 100%; min-height: 60px; height: auto; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-top: 1px solid #eef2f7; border-radius: 0; background: #fff; padding: 8px 10px; color: inherit; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 60px; } .v2-vehicle-row .semi-button-content { display: contents; } .v2-vehicle-row:hover { background: #f8fbff; } .v2-vehicle-row.is-selected { position: relative; z-index: 1; background: var(--v2-blue-soft); box-shadow: inset 3px 0 var(--v2-blue); } .v2-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; } .v2-status-dot.is-online, .v2-status-dot.is-idle { background: var(--v2-green); } .v2-status-dot.is-driving { background: var(--v2-blue); } .v2-status-dot.is-offline { background: #aab3c0; } .v2-status-dot.is-alert { background: var(--v2-red); } .v2-vehicle-identity, .v2-vehicle-motion { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .v2-vehicle-identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-identity small, .v2-vehicle-motion small { overflow: hidden; color: #8996a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-motion { align-items: flex-end; } .v2-vehicle-motion strong { font-size: 11px; font-variant-numeric: tabular-nums; } .v2-vehicle-motion strong small { font-size: 8px; font-weight: 500; } .v2-vehicle-rail > footer { display: flex; height: 34px; align-items: center; justify-content: center; border-top: 1px solid var(--v2-border); } .v2-list-loading { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: 8px; color: var(--v2-muted); font-size: 11px; } .v2-monitor-table-panel.semi-card { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; box-shadow: 0 4px 16px rgba(21,32,51,.04); } .v2-monitor-table-panel > .semi-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; } .v2-monitor-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-monitor-table-scroll table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .v2-monitor-table-scroll th { position: sticky; top: 0; z-index: 3; height: 42px; border-bottom: 1px solid #dce4ee; background: #f7f9fc; padding: 0 14px; color: #607086; font-size: 11px; font-weight: 650; text-align: left; } .v2-monitor-table-scroll th:nth-child(1) { width: 210px; }.v2-monitor-table-scroll th:nth-child(2) { width: 120px; }.v2-monitor-table-scroll th:nth-child(3) { width: 170px; }.v2-monitor-table-scroll th:nth-child(4) { width: 190px; }.v2-monitor-table-scroll th:nth-child(5) { width: auto; } .v2-monitor-table-scroll td { height: 62px; border-bottom: 1px solid #edf1f6; padding: 7px 14px; vertical-align: middle; } .v2-monitor-table-scroll tbody tr { transition: background .14s ease; } .v2-monitor-table-scroll tbody tr:hover { background: #f8fbff; } .v2-monitor-table-scroll td > strong, .v2-monitor-table-scroll td > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-table-vehicle > .v2-monitor-vehicle-action.semi-button { display: flex; width: 100%; max-width: 100%; height: auto; justify-content: flex-start; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; text-align: left; }.v2-monitor-table-vehicle > .v2-monitor-vehicle-action.semi-button:hover strong { color: var(--v2-blue); } .v2-monitor-vehicle-action .semi-button-content { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; } .v2-monitor-table-vehicle strong, .v2-monitor-table-vehicle span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-monitor-table-vehicle strong { color: #263448; font-size: 13px; transition: color .14s ease; }.v2-monitor-table-vehicle span { margin-top: 4px; color: #8996a8; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; } .v2-monitor-live-value { display: inline !important; color: #213044; font-size: 14px !important; font-variant-numeric: tabular-nums; } .v2-monitor-live-unit { margin-left: 4px; color: #8b98aa; font-size: 9px; } .v2-monitor-coordinate { color: #52637a; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.55; } .v2-monitor-source-badge { display: inline-flex !important; max-width: 100%; align-items: center; overflow: hidden; border: 1px solid #dbe5f1; border-radius: 999px; background: #f7faff; padding: 4px 8px; color: #42648f; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-mileage, .v2-monitor-last-seen { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .v2-monitor-mileage > span { display: grid; min-width: 0; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 4px; } .v2-monitor-mileage small { color: #8996a8; font-size: 8px; }.v2-monitor-mileage strong { overflow: hidden; color: #34445a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-monitor-last-seen strong { color: #46566c; font-size: 10px; }.v2-monitor-last-seen span { overflow: hidden; color: #8a97a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-monitor-unavailable { color: #a2acb9; } .v2-monitor-address-action.semi-button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 1px solid #d5e0ee; border-radius: 6px; background: #fff; padding: 0 9px; color: #3568a9; cursor: pointer; font-size: 10px; font-weight: 650; transition: border-color .14s ease, background .14s ease; } .v2-monitor-address-action:hover { border-color: #9bb8dd; background: #f4f8fe; }.v2-monitor-address-action.is-error { border-color: #f0c9c9; color: #b74b4b; } .v2-monitor-address-empty, .v2-monitor-address-loading { display: inline-flex; align-items: center; gap: 6px; color: #929dac; font-size: 10px; } .v2-monitor-address-result { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; } .v2-monitor-address-result > span { display: block; width: 100%; overflow: hidden; color: #47576c; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-address-result > small { color: #98a3b2; font-size: 8px; } .v2-monitor-address-result > .v2-monitor-address-update.semi-button { height: auto; min-height: 0; border: 0; background: transparent; padding: 0; color: #c27a13; cursor: pointer; font-size: 9px; } .v2-monitor-source { min-width: 0; border-left: 2px solid #d6dee9; padding-left: 8px; } .v2-monitor-source.is-online { border-color: #1fb573; }.v2-monitor-source.is-offline, .v2-monitor-source.is-pending, .v2-monitor-source.is-unknown { border-color: #f59e0b; }.v2-monitor-source.is-not-required { opacity: .62; } .v2-monitor-source header, .v2-monitor-source header span, .v2-monitor-source > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .v2-monitor-source header span { justify-content: flex-start; font-size: 10px; font-weight: 700; }.v2-monitor-source header i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .v2-monitor-source.is-online header span { color: #16885a; }.v2-monitor-source.is-abnormal header span { color: #c87905; }.v2-monitor-source header time { color: #8996a8; font-size: 9px; white-space: nowrap; } .v2-monitor-source > div { margin-top: 7px; justify-content: flex-start; }.v2-monitor-source > div b { font-size: 11px; }.v2-monitor-source > div span { color: #59677c; font-size: 10px; } .v2-monitor-source > small { display: block; margin-top: 5px; overflow: hidden; color: #8996a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-monitor-overall { display: inline-flex; border-radius: 10px; background: #edf2f7; padding: 3px 8px; color: #637186; font-size: 10px; }.v2-monitor-overall.is-healthy { background: #e7f8f0; color: #16885a; }.v2-monitor-overall.is-degraded, .v2-monitor-overall.is-incomplete { background: #fff4df; color: #a86400; }.v2-monitor-overall.is-offline { background: #f1f3f6; color: #68778b; } .v2-monitor-table-loading { position: sticky; bottom: 0; display: flex; height: 34px; align-items: center; justify-content: center; gap: 7px; background: rgba(255,255,255,.92); color: #607086; font-size: 10px; } .v2-monitor-mobile-cards { display: none; } .v2-monitor-table-panel > .semi-card-body > footer { display: flex; min-height: 44px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 6px 14px; color: #718096; font-size: 11px; } .v2-monitor-table-panel > .semi-card-body > footer div { display: flex; gap: 7px; }.v2-monitor-table-panel > .semi-card-body > footer button, .v2-monitor-table-panel > .semi-card-body > footer select { height: 30px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 10px; color: #536277; font-size: 10px; cursor: pointer; }.v2-monitor-table-panel > .semi-card-body > footer button:disabled { cursor: not-allowed; opacity: .45; } .v2-monitor-qr-modal.semi-modal { overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 28px 80px rgba(13,33,62,.25); } .v2-monitor-qr-modal .semi-modal-header { margin: 0; border-bottom: 1px solid #edf1f6; padding: 18px 20px 15px; } .v2-monitor-qr-modal .semi-modal-title { color: #17253a; font-size: 17px; font-weight: 720; } .v2-monitor-qr-modal .semi-modal-body { margin: 0; padding: 18px 20px 12px; } .v2-monitor-qr-modal .semi-modal-footer { margin: 0; border-top: 0; padding: 0 20px 20px; } .v2-monitor-qr-modal .semi-modal-footer .semi-button { height: 40px; border-radius: 9px; font-weight: 700; } .v2-monitor-qr-content { display: flex; align-items: center; flex-direction: column; text-align: center; } .v2-monitor-qr-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 24px; } .v2-monitor-qr-content > p { margin: 10px 0 13px; color: #718096; font-size: 11px; line-height: 1.65; } .v2-monitor-qr-content > img { width: 220px; height: 220px; border-radius: 10px; } .v2-monitor-qr-content > code { width: 100%; overflow: hidden; margin-top: 11px; border-radius: 7px; background: #f5f7fa; padding: 9px; color: #5f6e82; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-qr-content > .v2-spinner { width: 28px; height: 28px; margin: 96px; } .v2-monitor-qr-error { display: flex; width: 220px; height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border: 1px dashed #f0b7b7; border-radius: 10px; background: #fff7f7; padding: 18px; color: #a53a3a; font-size: 11px; line-height: 1.6; } .v2-monitor-qr-error .semi-button { height: 32px; border-radius: 7px; padding: 0 12px; font-size: 10px; font-weight: 700; } .v2-fleet-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e8f0f6; } .v2-fleet-map-canvas { position: absolute; inset: 0; } .v2-map-controls { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: stretch; gap: 8px; } .v2-map-control-button.semi-button { width: auto; height: 46px; border: 1px solid rgba(210,220,233,.96); border-radius: 10px; background: rgba(255,255,255,.96); padding: 0 9px 0 11px; color: #53677f; box-shadow: 0 9px 26px rgba(21,32,51,.13); backdrop-filter: blur(14px); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-map-control-button.semi-button:hover { border-color: #b9cae0; background: #fff; box-shadow: 0 12px 30px rgba(21,32,51,.16); transform: translateY(-1px); } .v2-map-control-button.semi-button:active { transform: translateY(0); } .v2-map-control-button.semi-button.is-active { border-color: #aac8f5; background: rgba(244,248,255,.98); color: var(--v2-blue); } .v2-map-control-button .semi-button-content { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; } .v2-map-control-button .semi-icon { color: currentColor; font-size: 16px; } .v2-map-control-copy { display: grid; min-width: 0; align-items: start; gap: 2px; text-align: left; } .v2-map-control-copy strong { color: #31445b; font-size: 10px; line-height: 1.15; } .v2-map-control-copy small { color: #8190a3; font-size: 8px; font-weight: 500; line-height: 1.15; white-space: nowrap; } .v2-map-control-button.is-active .v2-map-control-copy strong { color: #245f9f; } .v2-map-control-button.is-active .v2-map-control-copy small { color: #6387b7; } .v2-map-control-state.semi-tag { min-width: 44px; height: 22px; justify-content: center; border-radius: 999px; padding-inline: 7px; font-size: 8px; font-weight: 700; } .v2-map-selection-marker { --v2-selection-color: #f59e0b; --v2-selection-rgb: 245,158,11; position: relative; width: 48px; height: 48px; pointer-events: none; } .v2-map-selection-marker.is-driving { --v2-selection-color: #1677ff; --v2-selection-rgb: 22,119,255; } .v2-map-selection-marker.is-idle { --v2-selection-color: #12a46f; --v2-selection-rgb: 18,164,111; } .v2-map-selection-marker.is-offline { --v2-selection-color: #9aa6b7; --v2-selection-rgb: 154,166,183; } .v2-map-selection-marker.is-alert { --v2-selection-color: #ef4444; --v2-selection-rgb: 239,68,68; } .v2-map-selection-marker > i { position: absolute; inset: 4px; border: 2px solid rgba(var(--v2-selection-rgb),.6); border-radius: 50%; animation: v2-map-ripple 2s ease-out infinite; } .v2-map-selection-marker > i:nth-child(2) { animation-delay: 1s; } .v2-map-selection-marker > b { position: absolute; top: 18px; left: 18px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--v2-selection-color); box-shadow: 0 2px 8px rgba(var(--v2-selection-rgb),.45); } .v2-province-placement { position: relative; width: 0; height: 0; } .v2-province-anchor { position: absolute; top: -3px; left: -3px; z-index: 2; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #397fd7; box-shadow: 0 2px 6px rgba(31,92,167,.34); pointer-events: none; } .v2-province-connector { position: absolute; top: -.5px; left: 0; width: var(--province-line); height: 1px; background: rgba(72,111,158,.46); pointer-events: none; transform: rotate(var(--province-angle)); transform-origin: 0 50%; } .v2-province-marker { position: absolute; top: var(--province-y); left: var(--province-x); display: grid; width: 92px; min-height: 42px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; overflow: hidden; border: 1px solid rgba(126,164,216,.78); border-radius: 9px; background: rgba(255,255,255,.96); padding: 7px 9px; color: #27405f; box-shadow: 0 7px 22px rgba(31,65,112,.18); cursor: pointer; font-family: Inter,"PingFang SC","Microsoft YaHei",sans-serif; text-align: left; transform: translate(-50%,-50%) translateZ(0); transition: border-color .16s ease, box-shadow .16s ease, margin .16s ease; } .v2-province-marker:hover { margin-top: -1px; border-color: #397fd7; box-shadow: 0 9px 26px rgba(31,92,167,.25); } .v2-province-marker > span { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .v2-province-marker > strong { color: #1268f3; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1; } .v2-map-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; background: #eef3f7; color: #637083; font-size: 12px; } .v2-map-state.is-loading { background: rgba(255,255,255,.82); backdrop-filter: blur(2px); } .v2-map-state.is-error { flex-direction: column; padding: 20px; color: #b42318; text-align: center; } .v2-map-state.is-error .v2-map-retry-action.semi-button { height: 32px; border: 1px solid #f2b8b5; border-radius: 7px; background: #fff; padding: 0 11px; color: #a61b13; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgba(180,35,24,.08); } .v2-map-state.is-error .v2-map-retry-action.semi-button:hover { border-color: #df8a85; background: #fff8f7; } .v2-map-legend { position: absolute; bottom: 12px; left: 50%; display: flex; width: max-content; max-width: calc(100% - 28px); height: 36px; align-items: center; justify-content: center; gap: 18px; border: 1px solid #d8e2ed; border-radius: 8px; background: #fff; padding: 0 16px; color: #5f6e82; box-shadow: 0 6px 18px rgba(21,32,51,.1); font-size: 9px; transform: translateX(-50%); } .v2-map-legend span { display: inline-flex; align-items: center; gap: 5px; } .v2-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; } .v2-map-legend .is-driving { background: var(--v2-blue); } .v2-map-legend .is-idle { background: var(--v2-green); } .v2-map-legend .is-alert { background: var(--v2-red); } .v2-map-legend b { margin-left: 6px; color: #4d5c70; font-weight: 600; } .v2-vehicle-detail { position: relative; min-width: 0; min-height: 0; contain: layout paint; overflow: auto; border: 0; border-left: 1px solid var(--v2-border); border-radius: 0; background: #fff; padding: 14px; box-shadow: none; animation: v2-panel-enter .14s ease-out; } .v2-vehicle-detail > .semi-card-body { min-height: 100%; } .v2-detail-controls { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 4px; } .v2-detail-controls .semi-button { display: grid; width: 28px; min-width: 28px; height: 28px; place-items: center; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0; color: #68768a; cursor: pointer; transition: border-color .16s, background .16s, color .16s; } .v2-detail-controls .semi-button:hover { border-color: #a9c5f2; background: #f1f6ff; color: var(--v2-blue); } .v2-detail-controls .semi-button:last-child:hover { border-color: #f0b9b9; background: #fff5f5; color: var(--v2-red); } .v2-detail-title { padding: 2px 68px 12px 0; border-bottom: 1px solid var(--v2-border); } .v2-detail-title > div { display: flex; align-items: center; gap: 8px; } .v2-detail-title strong { font-size: 16px; } .v2-detail-title small { display: block; margin-top: 4px; color: var(--v2-muted); font-size: 9px; } .v2-status-text.semi-tag { flex: 0 0 auto; border-radius: 999px; font-size: 9px; font-weight: 700; } .v2-status-text.is-driving { color: var(--v2-blue); } .v2-status-text.is-idle, .v2-status-text.is-online { color: var(--v2-green); } .v2-status-text.is-alert { color: var(--v2-red); } .v2-detail-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 0; } .v2-detail-actions a { display: flex; height: 30px; align-items: center; justify-content: center; border: 1px solid #dce4ef; border-radius: 6px; color: #59677c; text-decoration: none; font-size: 9px; font-weight: 700; } .v2-detail-actions a:first-child { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; } .v2-detail-peek { min-width: 0; min-height: 0; contain: layout paint; overflow: hidden; border: 0; border-left: 1px solid var(--v2-border); border-radius: 0; background: #fff; box-shadow: none; animation: v2-panel-enter .12s ease-out; } .v2-detail-peek > .semi-card-body { height: 100%; } .v2-detail-peek .semi-button { display: flex; width: 100%; height: 100%; align-items: center; border: 0; border-radius: 0; background: #fff; padding: 14px 8px; color: #65758a; cursor: pointer; transition: background .16s, color .16s; } .v2-detail-peek .semi-button:hover { background: #f2f7ff; color: var(--v2-blue); } .v2-detail-peek .semi-button-content { display: flex; align-items: center; flex-direction: column; gap: 10px; } .v2-detail-peek .semi-button-content > svg { flex: 0 0 auto; font-size: 15px; } .v2-detail-peek .semi-button-content > span { overflow: hidden; writing-mode: vertical-rl; color: #435168; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-overflow: ellipsis; } .v2-vehicle-detail section { padding: 10px 0; border-top: 1px solid var(--v2-border); } .v2-vehicle-detail h3 { margin: 0 0 9px; font-size: 11px; } .v2-detail-list { margin: 0; } .v2-detail-list > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 5px 0; font-size: 9px; } .v2-detail-list dt { color: var(--v2-muted); } .v2-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #3d4a5e; } .v2-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--v2-border); border-radius: 7px; } .v2-metric-grid > div { min-width: 0; padding: 9px; } .v2-metric-grid > div:nth-child(even) { border-left: 1px solid var(--v2-border); } .v2-metric-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); } .v2-metric-grid small { display: block; color: var(--v2-muted); font-size: 8px; } .v2-metric-grid strong { display: block; margin-top: 4px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .v2-metric-grid em { margin-left: 2px; color: var(--v2-muted); font-size: 7px; font-style: normal; font-weight: 500; } .v2-detail-source-summary { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; } .v2-detail-source-summary .semi-tag { flex: 0 0 auto; border-radius: 999px; font-size: 9px; } .v2-detail-source-summary > span:not(.semi-tag) { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-gb-highlight-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; overflow: hidden; border: 1px solid #dce8e2; border-radius: 8px; background: #f8fcfa; } .v2-gb-highlight-grid > div { min-width: 0; padding: 8px 9px; border-top: 1px solid #e5eee9; } .v2-gb-highlight-grid > div:nth-child(-n+2) { border-top: 0; } .v2-gb-highlight-grid > div:nth-child(even) { border-left: 1px solid #e5eee9; } .v2-gb-highlight-grid small { display: block; overflow: hidden; color: #678075; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-gb-highlight-grid strong { display: block; margin-top: 3px; color: #203a30; font-size: 13px; font-variant-numeric: tabular-nums; } .v2-gb-highlight-grid em { margin-left: 2px; color: #7e938a; font-size: 7px; font-style: normal; font-weight: 500; } .v2-metric-source-link.semi-button, .v2-live-source-link { display: block; width: 100%; height: auto; margin-top: 4px; overflow: hidden; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; } .v2-metric-source-link .semi-button-content { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; } .v2-metric-source-link .semi-button-content > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .v2-metric-source-link .semi-button-content > svg { flex: 0 0 auto; color: #7f90a7; font-size: 12px; } .v2-metric-source-link:hover, .v2-live-source-link:hover, .v2-detail-source-link:hover, .v2-map-source-link:hover { color: var(--v2-blue); } .v2-detail-source-link.semi-button { max-width: 100%; height: auto; min-height: 0; overflow: hidden; border: 0; background: transparent; padding: 0; color: #3d4a5e; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: inherit; } .v2-source-evidence.semi-card { min-width: 0; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgba(23,43,77,.045); } .v2-source-evidence > .semi-card-body { min-width: 0; } .v2-record-grid > .v2-source-evidence { grid-column: 1 / -1; } .v2-source-evidence-trigger { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; } .v2-source-evidence-trigger > div { min-width: 0; } .v2-source-evidence-trigger strong { display: block; color: #25344a; font-size: 12px; } .v2-source-evidence-trigger span { display: block; margin-top: 3px; overflow: hidden; color: #79869a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-trigger button { flex: 0 0 auto; height: 30px; border: 1px solid #bfd4f6; border-radius: 7px; background: #f3f7ff; padding: 0 11px; color: var(--v2-blue); cursor: pointer; font-size: 9px; font-weight: 700; } .v2-source-evidence-body { border-top: 1px solid var(--v2-border); padding: 12px 14px 14px; } .v2-source-evidence-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .v2-source-evidence-toolbar label { display: flex; align-items: center; gap: 8px; color: #59677b; font-size: 9px; font-weight: 700; } .v2-source-evidence-toolbar input { height: 30px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 8px; color: #344257; font-size: 9px; } .v2-source-evidence-toolbar small { color: #8b96a8; font-size: 8px; } .v2-source-evidence-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #f8fafc; } .v2-source-evidence-summary > div { min-width: 0; padding: 10px 12px; } .v2-source-evidence-summary > div + div { border-left: 1px solid #e2e8f0; } .v2-source-evidence-summary small { display: block; color: #7b8799; font-size: 8px; } .v2-source-evidence-summary strong { display: block; margin-top: 4px; overflow: hidden; color: #26364c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-source-evidence-summary em { margin-left: 3px; color: #8793a5; font-size: 8px; font-style: normal; font-weight: 500; } .v2-source-evidence-group { margin-top: 12px; padding: 0; border: 0; } .v2-source-evidence-group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .v2-source-evidence-group > header strong { color: #314157; font-size: 11px; } .v2-source-evidence-group > header span { color: #8995a7; font-size: 8px; } .v2-source-evidence-group > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 8px; } .v2-source-evidence-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(31,53,80,.035); } .v2-source-evidence-card.is-recommended { border-color: #8eb8f5; box-shadow: inset 3px 0 #3b82f6; } .v2-source-evidence-card.is-warning { border-color: #f0c16f; box-shadow: inset 3px 0 #eaa126; } .v2-source-evidence-card.is-disabled, .v2-source-evidence-card.is-offline { background: #fafbfc; opacity: .82; } .v2-source-evidence-card > .semi-card-body > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #edf1f5; padding: 8px 10px; } .v2-source-evidence-card > .semi-card-body > header > div { min-width: 0; } .v2-source-evidence-card > .semi-card-body > header strong { display: block; overflow: hidden; color: #2c3b50; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-card > .semi-card-body > header > div > span { display: block; margin-top: 3px; overflow: hidden; color: #7e8a9c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-card > .semi-card-body > header aside { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .v2-source-evidence-card > .semi-card-body > header .semi-tag { max-width: 110px; overflow: hidden; border-radius: 10px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 5px 10px 8px; } .v2-source-evidence-card dl > div { min-width: 0; padding: 5px 3px; } .v2-source-evidence-card dt { color: #8b96a7; font-size: 7px; } .v2-source-evidence-card dd { margin: 3px 0 0; overflow: hidden; color: #445268; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-source-evidence-card > .semi-card-body > p { margin: 0 10px 9px; border-radius: 5px; background: #fff7e8; padding: 6px 8px; color: #9a650b; font-size: 7px; line-height: 1.5; } .v2-source-evidence-state { display: flex; min-height: 80px; align-items: center; justify-content: center; gap: 8px; color: #718096; font-size: 9px; } .v2-source-evidence-state i { width: 16px; height: 16px; border: 2px solid #cbd8ea; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } .v2-source-evidence-state.is-error { color: #b42318; } .v2-source-evidence-state button { height: 28px; border: 1px solid #edb5b0; border-radius: 6px; background: #fff; padding: 0 9px; color: #a61b13; cursor: pointer; font-size: 8px; } .v2-source-evidence-empty.semi-empty { min-height: 150px; padding: 20px; } .v2-source-evidence-empty .semi-empty-title { color: #526176; font-size: 11px; } .v2-source-evidence-empty .semi-empty-description { color: #8b96a8; font-size: 9px; } .v2-source-evidence.is-compact { margin-top: 10px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; } .v2-source-evidence.is-compact .v2-source-evidence-trigger { padding: 9px 0; } .v2-source-evidence.is-compact .v2-source-evidence-body { padding: 10px 0 2px; } .v2-source-evidence.is-compact .v2-source-evidence-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; } .v2-source-evidence.is-compact .v2-source-evidence-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-source-evidence.is-compact .v2-source-evidence-summary > div:nth-child(3) { border-left: 0; } .v2-source-evidence.is-compact .v2-source-evidence-summary > div:nth-child(n+3) { border-top: 1px solid #e2e8f0; } .v2-source-evidence.is-compact .v2-source-evidence-group > div { grid-template-columns: 1fr; } .v2-vehicle-detail .v2-source-evidence-group { padding: 0; border-top: 0; } .v2-event-strip.semi-card { min-height: 48px; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(21,32,51,.035); color: #6d7a8d; font-size: 10px; } .v2-event-strip > .semi-card-body { display: flex; min-height: 46px; align-items: center; gap: 22px; padding: 0 16px; } .v2-event-strip strong { color: var(--v2-text); font-size: 11px; } .v2-event-strip span { display: inline-flex; align-items: center; gap: 6px; } .v2-event-strip i { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-green); } .v2-event-strip time { margin-left: auto; font-variant-numeric: tabular-nums; } .v2-event-strip .semi-tag { flex: 0 0 auto; border-radius: 999px; font-size: 9px; } .v2-monitor-live-tag.semi-tag { display: inline-flex; align-items: center; gap: 5px; } .v2-refresh-cadence { border-left: 1px solid var(--v2-border); padding-left: 18px; } .v2-refresh-cadence b { color: var(--v2-blue); font-weight: 700; } .v2-page-state, .v2-inline-state { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--v2-muted); font-size: 12px; } .v2-page-state { min-height: 100%; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 36px); } .v2-page-state > header { display: flex; align-items: center; gap: 10px; } .v2-page-state > header strong, .v2-page-state > header small { display: block; } .v2-page-state > header strong { color: var(--v2-text); font-size: 13px; } .v2-page-state > header small { margin-top: 3px; color: var(--v2-muted); font-size: 9px; } .v2-page-skeleton { display: grid; width: min(920px, 100%); grid-template-columns: repeat(3,1fr); gap: 10px; } .v2-page-skeleton i { min-height: 72px; border: 1px solid #edf1f6; border-radius: 10px; background: linear-gradient(100deg,#f4f7fb 25%,#edf3fa 38%,#f4f7fb 55%); background-size: 300% 100%; animation: v2-skeleton 1.4s ease infinite; } .v2-page-skeleton i:last-child { min-height: 260px; grid-column: 1 / -1; } .v2-route-error { display: grid; min-height: 100%; place-items: center; padding: 28px; background: #f6f8fb; } .v2-root-error { min-height: 100vh; } .v2-route-error > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: #fff1f2; color: #dc2626; font-size: 24px; } .v2-route-error > div { width: 100%; max-width: 560px; min-width: 0; text-align: center; } .v2-route-error small { color: #b45309; font-size: 10px; font-weight: 700; } .v2-route-error h2 { margin: 8px 0; color: var(--v2-text); font-size: 21px; } .v2-route-error p { margin: 0 auto; color: var(--v2-muted); font-size: 12px; line-height: 1.7; } .v2-route-error code { display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9b1c1c; font-size: 9px; } .v2-recovery-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .v2-route-error .v2-recovery-actions > .semi-button { height: 38px; border-radius: 8px; padding: 0 14px; font-size: 11px; font-weight: 700; } .v2-route-error .v2-recovery-actions > .semi-button-primary { box-shadow: 0 5px 14px rgba(18,104,243,.18); } @media (max-width: 680px) { .v2-route-error { overflow: hidden; padding: 20px 16px; } .v2-route-error > span { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; } .v2-route-error h2 { margin: 7px 0; font-size: 20px; line-height: 1.35; } .v2-route-error p { font-size: 11px; line-height: 1.65; } .v2-route-error code { max-height: 44px; overflow: auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } .v2-route-error .v2-recovery-actions { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; } .v2-route-error .v2-recovery-actions > .semi-button { width: 100%; height: 42px; justify-content: center; font-size: 12px; } } /* Semi UI account workspace: consistent identity, authorization cards, and audit history. */ .v2-user-list > .semi-card-body > .v2-user-list-card.semi-card { width: 100%; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; content-visibility: auto; contain-intrinsic-size: auto 64px; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } .v2-user-list > .semi-card-body > .v2-user-list-card.semi-card:hover { border-color: #e1e8f1; background: #f3f7fc; } .v2-user-list > .semi-card-body > .v2-user-list-card.is-active.semi-card { border-color: #c8dcfb; background: linear-gradient(100deg, #eaf3ff 0%, #f4f8ff 100%); box-shadow: inset 3px 0 var(--v2-blue), 0 3px 10px rgba(54,102,174,.08); } .v2-user-list-card .v2-user-list-item.semi-button { display: flex; width: 100%; height: auto; min-height: 60px; justify-content: stretch; border-radius: 0; background: transparent; padding: 9px 10px; color: #273750; text-align: left; } .v2-user-list-card .v2-user-list-item.semi-button:hover { background: transparent; } .v2-user-list-item .semi-button-content { display: grid; width: 100%; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .v2-user-avatar.semi-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; font-weight: 800; } .v2-user-list-identity { min-width: 0; } .v2-user-list-identity b, .v2-user-list-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-user-list-identity b { color: #26384f; font-size: 12px; } .v2-user-list-identity small { margin-top: 4px; color: #8290a3; font-size: 9px; } .v2-user-status-tag.semi-tag { min-height: 23px; border-radius: 7px; padding-inline: 7px; font-size: 9px; font-weight: 700; } .v2-user-status-tag.is-enabled.semi-tag { background: #eaf8f2; color: #167759; } .v2-user-list-trailing { display: flex; align-items: center; gap: 3px; } .v2-user-list-trailing > svg { width: 13px; height: 13px; color: #9aa7b8; } .v2-user-list-card.is-active .v2-user-list-trailing > svg { color: var(--v2-blue); } .v2-assigned-vins > .v2-assigned-vehicle-card.semi-card { min-width: 0; overflow: visible; border-color: #dbe4ef; border-radius: 10px; background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%); padding: 10px; box-shadow: 0 2px 8px rgba(27,43,65,.035); transition: border-color .16s ease, box-shadow .16s ease; } .v2-assigned-vins > .v2-assigned-vehicle-card.semi-card:hover { border-color: #c5d6e9; box-shadow: 0 5px 16px rgba(27,43,65,.07); } .v2-assigned-vehicle-card > .semi-card-body > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .v2-assigned-vehicle-card > .semi-card-body > header > span { min-width: 0; } .v2-assigned-vehicle-card > .semi-card-body > header b, .v2-assigned-vehicle-card > .semi-card-body > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-assigned-vehicle-card > .semi-card-body > header b { color: #2c4058; font-size: 12px; } .v2-assigned-vehicle-card > .semi-card-body > header small { margin-top: 3px; color: #8996a8; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .v2-assigned-vehicle-card > .semi-card-body > header .semi-button { width: 28px; min-width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; padding: 0; color: #8795a7; } .v2-assigned-vehicle-card > .semi-card-body > header .semi-button:hover { background: #fff0ef; color: var(--v2-red); } .v2-assigned-vehicle-card > .semi-card-body > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .v2-grant-history.semi-collapse { margin-top: 12px; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 10px; background: #fff; } .v2-grant-history > .semi-collapse-item { display: block; max-height: none; grid-template-columns: none; overflow: visible; border-top: 0; padding: 0; } .v2-grant-history .semi-collapse-item { border-bottom: 0; } .v2-grant-history .semi-collapse-header { min-height: 42px; border-radius: 0; background: linear-gradient(180deg, #fbfdff, #f7faff); padding: 0 12px; color: #42566f; } .v2-grant-history .semi-collapse-header:hover { background: #f3f7fd; } .v2-grant-history .semi-collapse-header-right { width: 100%; } .v2-grant-history-title { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; } .v2-grant-history-title .semi-tag { min-height: 22px; border-radius: 6px; font-size: 9px; } .v2-grant-history .semi-collapse-content { border-top: 1px solid #e8eef5; background: #fff; } .v2-grant-history .semi-collapse-content-wrapper { padding: 0; } .v2-grant-history-list { display: grid; max-height: 270px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: auto; padding: 8px; } .v2-grant-history-card.semi-card { min-width: 0; border-color: #e5ebf2; border-radius: 9px; background: #f8fafc; padding: 10px; box-shadow: none; } .v2-grant-history-card > .semi-card-body > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .v2-grant-history-card > .semi-card-body > header > span { min-width: 0; } .v2-grant-history-card > .semi-card-body > header strong, .v2-grant-history-card > .semi-card-body > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-grant-history-card > .semi-card-body > header strong { color: #30445c; font-size: 11px; } .v2-grant-history-card > .semi-card-body > header small { margin-top: 3px; color: #8290a3; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .v2-grant-history-card > .semi-card-body > header .semi-tag { min-height: 22px; flex: 0 0 auto; border-radius: 6px; font-size: 9px; } .v2-grant-history-card > .semi-card-body > p { margin: 8px 0 5px; color: #50647c; font-size: 10px; font-variant-numeric: tabular-nums; } .v2-grant-history-card > .semi-card-body > p i { margin: 0 3px; color: #9ba7b6; font-style: normal; } .v2-grant-history-card > .semi-card-body > small { color: #8996a7; font-size: 9px; line-height: 1.5; } @media (max-width: 680px) { .v2-user-list > .semi-card-body > .v2-user-list-card.semi-card { min-width: 230px; flex: 0 0 230px; contain-intrinsic-size: auto 66px; } .v2-user-list-card .v2-user-list-item.semi-button { min-height: 64px; } .v2-user-list-item .semi-button-content { grid-template-columns: 40px minmax(0, 1fr) auto; } .v2-user-avatar.semi-avatar { width: 40px; height: 40px; } .v2-user-list-identity b { font-size: 13px; } .v2-user-list-identity small, .v2-user-status-tag.semi-tag { font-size: 10px; } .v2-assigned-vehicle-card > .semi-card-body > div, .v2-grant-history-list { grid-template-columns: 1fr; } .v2-assigned-vins > .v2-assigned-vehicle-card.semi-card { padding: 12px; } .v2-assigned-vehicle-card > .semi-card-body > header b { font-size: 13px; } .v2-grant-history .semi-collapse-header { min-height: 46px; } .v2-grant-history-title { font-size: 12px; } } /* Semi UI shared vehicle candidates: one visual and interaction language across search surfaces. */ .v2-vehicle-candidate-list { --candidate-row-height: 52px; color: var(--v2-text); } .v2-vehicle-candidate-list > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e9eef5; background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%); padding: 0 12px; color: #52647a; font-size: 10px; font-weight: 700; } .v2-vehicle-candidate-list > header em { color: #8b98aa; font-size: 9px; font-style: normal; font-weight: 500; } .v2-vehicle-candidate-list > .v2-vehicle-option.semi-button { display: flex; width: 100%; height: auto; min-height: var(--candidate-row-height); justify-content: stretch; border: 0; border-bottom: 1px solid #edf2f7; border-radius: 0; background: #fff; padding: 7px 10px; color: var(--v2-text); text-align: left; transition: background-color .16s ease, box-shadow .16s ease; } .v2-vehicle-candidate-list > .v2-vehicle-option.semi-button:last-of-type { border-bottom-color: transparent; } .v2-vehicle-candidate-list > .v2-vehicle-option.semi-button:hover:not(.semi-button-disabled) { background: #f4f8ff; box-shadow: inset 3px 0 0 #79a8f5; } .v2-vehicle-candidate-list > .v2-vehicle-option.is-selected.semi-button { background: #f0f6ff; box-shadow: inset 3px 0 0 var(--v2-blue); } .v2-vehicle-candidate-list > .v2-vehicle-option.semi-button-disabled { cursor: default; opacity: 1; } .v2-vehicle-option .semi-button-content { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.2fr) auto; align-items: center; gap: 10px; } .v2-vehicle-option-identity { display: block; min-width: 0; } .v2-vehicle-option-identity strong, .v2-vehicle-option-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-option-identity strong { color: #26384f; font-size: 11px; font-weight: 750; } .v2-vehicle-option-identity small { margin-top: 3px; color: #8a97a9; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .v2-vehicle-option-protocols { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; } .v2-vehicle-option-protocols .semi-tag, .v2-vehicle-option-action.semi-tag { min-height: 22px; border-radius: 6px; padding-inline: 7px; font-size: 9px; font-weight: 650; } .v2-vehicle-option-action.semi-tag { justify-self: end; } .v2-vehicle-candidate-state { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: #7d8b9e; font-size: 10px; } .v2-vehicle-candidate-state.is-empty { background: linear-gradient(180deg, #fff, #fbfcfe); } .v2-vehicle-candidate-list.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; } .v2-vehicle-candidate-list.is-grid > header, .v2-vehicle-candidate-list.is-grid > footer, .v2-vehicle-candidate-list.is-grid > .v2-vehicle-candidate-state, .v2-vehicle-candidate-list.is-grid > .v2-vehicle-option-error { grid-column: 1 / -1; } .v2-vehicle-candidate-list.is-grid > .v2-vehicle-option.semi-button { min-height: 58px; border: 1px solid #e5ebf3; border-radius: 9px; padding: 8px 9px; } .v2-vehicle-candidate-list.is-grid > .v2-vehicle-option .semi-button-content { grid-template-columns: minmax(0, 1fr) auto; } .v2-source-candidates.v2-vehicle-candidate-list > footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5ebf3; background: rgba(255,255,255,.96); padding: 8px 10px; backdrop-filter: blur(8px); } .v2-source-candidates.v2-vehicle-candidate-list > footer > span { color: #7c899b; font-size: 9px; } .v2-source-candidates.v2-vehicle-candidate-list > footer > div { display: flex; gap: 6px; } .v2-source-candidates.v2-vehicle-candidate-list > footer .semi-button { min-height: 28px; border-radius: 7px; } .v2-track-vehicle-options.v2-vehicle-candidate-list, .v2-mileage-options.v2-vehicle-candidate-list { max-height: min(360px, 48vh); overflow: auto; } .v2-track-vehicle-options.v2-vehicle-candidate-list > .v2-vehicle-option .semi-button-content, .v2-mileage-options.v2-vehicle-candidate-list > .v2-vehicle-option .semi-button-content { grid-template-columns: minmax(100px, .7fr) minmax(150px, 1fr) auto; } @media (max-width: 680px) { .v2-vehicle-candidate-list { --candidate-row-height: 60px; } .v2-vehicle-candidate-list.is-grid { grid-template-columns: 1fr; } .v2-vehicle-candidate-list > header { min-height: 42px; font-size: 12px; } .v2-vehicle-candidate-list > header em { font-size: 10px; } .v2-vehicle-option .semi-button-content, .v2-track-vehicle-options.v2-vehicle-candidate-list > .v2-vehicle-option .semi-button-content, .v2-mileage-options.v2-vehicle-candidate-list > .v2-vehicle-option .semi-button-content { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .v2-vehicle-option-protocols { grid-column: 1; } .v2-vehicle-option-action.semi-tag { grid-column: 2; grid-row: 1 / span 2; } .v2-vehicle-option-identity strong { font-size: 13px; } .v2-vehicle-option-identity small { font-size: 10px; } .v2-vehicle-option-protocols .semi-tag, .v2-vehicle-option-action.semi-tag { min-height: 24px; font-size: 10px; } } .v2-inline-state { min-height: 76px; border: 1px dashed var(--v2-border); border-radius: 8px; padding: 12px; } .v2-inline-state.is-error { justify-content: flex-start; min-height: 42px; border-style: solid; border-color: #fecaca; background: #fff5f5; color: #b42318; } .v2-inline-state button { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; } .v2-spinner { width: 14px; height: 14px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } @keyframes v2-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .v2-module-stage { margin: 18px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 28px; box-shadow: var(--v2-shadow); } .v2-module-stage h2 { margin: 0; font-size: 20px; } .v2-module-stage p { margin: 10px 0 0; color: var(--v2-muted); font-size: 13px; } .v2-ops-page { display: flex; min-height: 100%; flex-direction: column; gap: 10px; padding: 12px 16px 16px; } .v2-ops-heading { display: flex; align-items: center; justify-content: space-between; }.v2-ops-heading h2 { margin: 0; font-size: 18px; }.v2-ops-heading p { margin: 4px 0 0; color: var(--v2-muted); font-size: 10px; }.v2-ops-heading button { display: flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 11px; color: #526176; cursor: pointer; font-size: 10px; } .v2-ops-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }.v2-ops-kpi-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); content-visibility: auto; contain-intrinsic-size: auto 104px; }.v2-ops-kpi-card > .semi-card-body { min-height: 96px; padding: 13px 15px !important; }.v2-ops-kpis small { display: block; color: var(--v2-muted); font-size: 9px; }.v2-ops-kpis strong { display: block; margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.v2-ops-kpis span { color: #8793a5; font-size: 8px; } .v2-ops-grid { display: grid; min-height: 280px; grid-template-columns: minmax(460px,1.5fr) minmax(280px,.8fr); gap: 10px; }.v2-ops-panel.semi-card { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-ops-links article { display: grid; min-height: 46px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #eef2f7; padding: 7px 13px; }.v2-ops-links article > i, .v2-ops-sources article i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }.v2-ops-links article > i.is-ok, .v2-ops-sources article i.is-ok { background: var(--v2-green); }.v2-ops-links article > i.is-warning, .v2-ops-sources article i.is-warning { background: var(--v2-orange); }.v2-ops-links article > i.is-error, .v2-ops-sources article i.is-error { background: var(--v2-red); }.v2-ops-links article strong { font-size: 9px; }.v2-ops-links article p { margin: 3px 0 0; color: var(--v2-muted); font-size: 8px; }.v2-ops-links article > span { border-radius: 10px; background: #f1f5f9; padding: 3px 7px; color: #64748b; font-size: 8px; } .v2-ops-runtime dl { margin: 0; padding: 7px 13px; }.v2-ops-runtime dl div { display: flex; min-height: 31px; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef2f7; font-size: 9px; }.v2-ops-runtime dt { color: var(--v2-muted); }.v2-ops-runtime dd { margin: 0; }.v2-ops-clear, .v2-ops-findings { margin: 4px 13px 12px; border-radius: 6px; background: #f1fbf7; padding: 8px; color: #17815d; font-size: 8px; }.v2-ops-findings { background: #fff7ed; color: #b45309; }.v2-ops-findings p { margin: 3px 0; } .v2-ops-sources > .semi-card-body > div { display: grid; grid-template-columns: repeat(3,1fr); }.v2-ops-sources article { min-width: 0; padding: 12px 14px; }.v2-ops-sources article + article { border-left: 1px solid var(--v2-border); }.v2-ops-sources article > div { display: flex; align-items: center; gap: 7px; }.v2-ops-sources article strong { font-size: 10px; }.v2-ops-sources article span { margin-left: auto; color: var(--v2-muted); font-size: 8px; }.v2-ops-sources article b { display: block; margin-top: 9px; font-size: 14px; }.v2-ops-sources article p { margin: 6px 0 0; color: #68768a; font-size: 8px; line-height: 1.45; }.v2-ops-sources article em { display: block; margin-top: 7px; color: var(--v2-blue); font-size: 8px; font-style: normal; }.is-ok { color: var(--v2-green) !important; }.is-warning { color: #b87900 !important; }.is-error { color: var(--v2-red) !important; } .v2-reconcile-center.semi-card { position: relative; overflow: hidden; border: 1px solid #cbd8e8; border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(31,53,80,.09); } .v2-reconcile-heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2e9f2; padding: 12px 16px; background: linear-gradient(105deg,#f7fbff 0%,#f2f7ff 58%,#eef5ff 100%); }.v2-reconcile-heading > div { display: grid; gap: 3px; }.v2-reconcile-heading small { color: #557494; font-size: 11px; }.v2-reconcile-heading strong { color: #17283b; font-size: 18px; }.v2-reconcile-heading span { color: #64758a; font-size: 12px; }.v2-reconcile-heading button { display: inline-flex; height: 36px; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid #c5d4e5; border-radius: 8px; background: #fff; padding: 0 13px; color: #355272; cursor: pointer; font-size: 12px; } .v2-reconcile-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; border-bottom: 1px solid #e3eaf2; background: #f7f9fc; padding: 10px; }.v2-reconcile-kpi-card.semi-card { min-width: 0; border: 1px solid #dfe7f1; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(31,53,80,.045); content-visibility: auto; contain-intrinsic-size: auto 88px; }.v2-reconcile-kpi-card > .semi-card-body { min-height: 82px; padding: 12px 14px !important; }.v2-reconcile-kpis small { display: block; color: #748398; font-size: 11px; }.v2-reconcile-kpis strong { display: block; margin: 5px 0 2px; color: #17283b; font-size: 22px; line-height: 1.1; }.v2-reconcile-kpis span { color: #8794a6; font-size: 10px; }.v2-reconcile-kpi-card.is-active strong { color: #2464c8; }.v2-reconcile-kpi-card.is-overdue strong { color: #c2413d; } .v2-reconcile-layout { position: relative; display: grid; min-height: 480px; grid-template-columns: minmax(0,1fr) 260px; }.v2-reconcile-main { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #e3eaf2; }.v2-reconcile-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) repeat(3,minmax(130px,auto)); gap: 8px; border-bottom: 1px solid #e7edf4; padding: 10px 12px; }.v2-reconcile-toolbar select, .v2-reconcile-search { height: 36px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; color: #33465c; font-size: 12px; }.v2-reconcile-toolbar select { min-width: 0; padding: 0 10px; }.v2-reconcile-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; }.v2-reconcile-search svg { color: #71849a; }.v2-reconcile-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #23374e; font: inherit; } .v2-reconcile-table-wrap { min-height: 360px; flex: 1; overflow: auto; }.v2-reconcile-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }.v2-reconcile-table th { position: sticky; z-index: 1; top: 0; height: 38px; background: #f7f9fc; padding: 0 11px; color: #718095; font-size: 11px; font-weight: 600; text-align: left; }.v2-reconcile-table th:nth-child(1) { width: 72px; }.v2-reconcile-table th:nth-child(2) { width: 27%; }.v2-reconcile-table th:nth-child(3) { width: 19%; }.v2-reconcile-table th:nth-child(4) { width: 15%; }.v2-reconcile-table th:nth-child(5) { width: 21%; }.v2-reconcile-table th:nth-child(6) { width: 112px; }.v2-reconcile-table tbody tr { cursor: pointer; border-top: 1px solid #edf1f6; outline: none; }.v2-reconcile-table tbody tr:hover, .v2-reconcile-table tbody tr:focus-visible { background: #f7fbff; }.v2-reconcile-table tbody tr.is-selected { background: #eef6ff; box-shadow: inset 3px 0 #3478d4; }.v2-reconcile-table td { height: 62px; padding: 8px 11px; vertical-align: middle; }.v2-reconcile-table td strong { display: block; overflow: hidden; color: #263a50; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.v2-reconcile-table td span:not(.v2-reconcile-severity):not(.v2-reconcile-status) { display: block; margin-top: 4px; overflow: hidden; color: #8290a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-reconcile-severity, .v2-reconcile-status { display: inline-flex; min-height: 24px; align-items: center; border-radius: 999px; padding: 0 8px; font-size: 10px; font-weight: 600; }.v2-reconcile-severity.is-critical { background: #fff0ef; color: #c53c36; }.v2-reconcile-severity.is-major { background: #fff6e5; color: #a96600; }.v2-reconcile-severity.is-minor { background: #eef4fa; color: #60758d; }.v2-reconcile-status { background: #edf3fb; color: #426485; }.v2-reconcile-status.is-pending { background: #fff4df; color: #a45f00; }.v2-reconcile-status.is-confirmed_source_a, .v2-reconcile-status.is-confirmed_source_b { background: #e9f2ff; color: #2464c8; }.v2-reconcile-status.is-recovered, .v2-reconcile-status.is-fixed { background: #eaf8f2; color: #167759; } .v2-reconcile-empty { margin: 0; padding: 34px 16px; color: #77879a; font-size: 12px; text-align: center; }.v2-reconcile-pagination { display: flex; min-height: 46px; align-items: center; justify-content: space-between; border-top: 1px solid #e6edf4; padding: 7px 12px; color: #728197; font-size: 11px; }.v2-reconcile-pagination div { display: flex; gap: 6px; }.v2-reconcile-pagination button { height: 30px; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; padding: 0 11px; color: #405870; cursor: pointer; font-size: 11px; }.v2-reconcile-pagination button:disabled { cursor: not-allowed; opacity: .45; } .v2-reconcile-trend.semi-card { border: 0; border-radius: 0; background: #fbfcfe; box-shadow: none; }.v2-reconcile-trend > .semi-card-body { padding: 12px !important; }.v2-reconcile-trend > .semi-card-body > header { display: grid; gap: 3px; margin-bottom: 10px; }.v2-reconcile-trend header strong { color: #273b51; font-size: 13px; }.v2-reconcile-trend header span, .v2-reconcile-trend > .semi-card-body > p { color: #8390a2; font-size: 10px; }.v2-reconcile-trend article { display: grid; min-height: 25px; grid-template-columns: 36px minmax(0,1fr) 28px; align-items: center; gap: 7px; }.v2-reconcile-trend time, .v2-reconcile-trend article b { color: #718197; font-size: 9px; font-weight: 500; }.v2-reconcile-trend article > div { position: relative; height: 12px; border-radius: 3px; background: #edf2f7; overflow: hidden; }.v2-reconcile-trend article i { position: absolute; left: 0; height: 4px; }.v2-reconcile-trend article i.is-active { top: 0; background: #4c7fc4; }.v2-reconcile-trend article i.is-new { top: 4px; background: #e2a237; }.v2-reconcile-trend article i.is-recovered { top: 8px; background: #35a37b; }.v2-reconcile-trend > .semi-card-body > footer { display: flex; gap: 10px; margin-top: 10px; color: #758398; font-size: 9px; }.v2-reconcile-trend footer span { display: inline-flex; align-items: center; gap: 4px; }.v2-reconcile-trend footer i { width: 7px; height: 7px; border-radius: 2px; }.v2-reconcile-trend footer i.is-active { background: #4c7fc4; }.v2-reconcile-trend footer i.is-new { background: #e2a237; }.v2-reconcile-trend footer i.is-recovered { background: #35a37b; } .v2-reconcile-detail.semi-card { position: fixed; z-index: 31; top: 68px; right: 0; bottom: 0; width: min(460px,52vw); overflow: hidden; border: 0; border-left: 1px solid #c9d7e7; border-radius: 0; background: #fff; box-shadow: -14px 0 34px rgba(25,48,75,.15); }.v2-reconcile-detail > .semi-card-body { height: 100%; }.v2-reconcile-detail > .semi-card-body > header { display: flex; min-height: 66px; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3eaf2; padding: 12px 14px; background: #f6f9fd; }.v2-reconcile-detail > .semi-card-body > header div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 8px; }.v2-reconcile-detail > .semi-card-body > header span { border-radius: 999px; background: #edf2f7; padding: 3px 7px; font-size: 10px; }.v2-reconcile-detail > .semi-card-body > header span.is-critical { background: #fff0ef; color: #c53c36; }.v2-reconcile-detail > .semi-card-body > header span.is-major { background: #fff6e5; color: #a96600; }.v2-reconcile-detail > .semi-card-body > header strong { width: 100%; color: #21364d; font-size: 15px; }.v2-reconcile-detail > .semi-card-body > header small { color: #738297; font-size: 10px; }.v2-reconcile-detail > .semi-card-body > header button { border: 0; background: transparent; color: #6f8093; cursor: pointer; font-size: 24px; line-height: 1; }.v2-reconcile-detail-body { height: calc(100% - 66px); padding: 12px 14px 20px; overflow: auto; }.v2-reconcile-identity { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #e1e8f0; border-radius: 9px; overflow: hidden; }.v2-reconcile-identity div { min-width: 0; padding: 10px; }.v2-reconcile-identity div + div { border-left: 1px solid #e5ebf2; }.v2-reconcile-identity small, .v2-reconcile-identity span { display: block; color: #8491a2; font-size: 9px; }.v2-reconcile-identity strong { display: block; margin: 4px 0; overflow: hidden; color: #2b3e54; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.v2-reconcile-summary { margin: 11px 0; border-radius: 8px; background: #f3f7fb; padding: 10px 12px; color: #4b5e73; font-size: 11px; line-height: 1.55; } .v2-reconcile-evidence.semi-card, .v2-reconcile-review.semi-card, .v2-reconcile-actions.semi-card { margin-top: 12px; overflow: hidden; border: 1px solid #e0e7ef; border-radius: 9px; box-shadow: none; }.v2-reconcile-evidence > .semi-card-body > header, .v2-reconcile-review > .semi-card-body > header, .v2-reconcile-actions > .semi-card-body > header { display: flex; min-height: 39px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebf2; padding: 0 11px; background: #fafbfd; }.v2-reconcile-evidence header strong, .v2-reconcile-review header strong, .v2-reconcile-actions header strong { color: #34495f; font-size: 11px; }.v2-reconcile-evidence header span, .v2-reconcile-review header span, .v2-reconcile-actions header span { color: #8794a4; font-size: 9px; }.v2-reconcile-evidence dl { margin: 0; }.v2-reconcile-evidence dl div { display: grid; grid-template-columns: 118px minmax(0,1fr); border-top: 1px solid #eef2f6; }.v2-reconcile-evidence dl div:first-child { border-top: 0; }.v2-reconcile-evidence dt { padding: 9px 10px; background: #fafbfd; color: #708095; font-size: 9px; }.v2-reconcile-evidence dd { min-width: 0; margin: 0; padding: 8px 10px; }.v2-reconcile-evidence pre { margin: 0; overflow: auto; color: #30475f; font: 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; } .v2-reconcile-review > .semi-card-body { padding-bottom: 11px !important; }.v2-reconcile-review > .semi-card-body > header { margin-bottom: 9px; }.v2-reconcile-review > .semi-card-body > label { display: grid; gap: 5px; margin: 8px 11px; color: #66778b; font-size: 10px; }.v2-reconcile-review select, .v2-reconcile-review textarea { border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; padding: 8px 9px; color: #30465d; font: inherit; }.v2-reconcile-review textarea { min-height: 78px; resize: vertical; }.v2-reconcile-review > .semi-card-body > button { height: 33px; margin: 3px 11px 0; border: 0; border-radius: 7px; background: #316fc3; padding: 0 13px; color: #fff; cursor: pointer; font-size: 11px; }.v2-reconcile-review > .semi-card-body > button:disabled { cursor: not-allowed; opacity: .5; }.v2-reconcile-review > .semi-card-body > p { margin: 7px 11px 0; color: #c23c37; font-size: 10px; } .v2-reconcile-actions > .semi-card-body > ol { margin: 0; padding: 9px 12px; list-style: none; }.v2-reconcile-actions li { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 8px; padding: 7px 0; }.v2-reconcile-actions li > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #5d83b5; }.v2-reconcile-actions li strong { color: #354b61; font-size: 10px; }.v2-reconcile-actions li p { margin: 3px 0; color: #627489; font-size: 10px; line-height: 1.4; }.v2-reconcile-actions li span { color: #8b97a7; font-size: 9px; }.v2-reconcile-actions > .semi-card-body > p { margin: 0; padding: 14px; color: #8290a1; font-size: 10px; } .v2-source-diagnostic.semi-card { position: relative; overflow: hidden; border: 1px solid #cfdbea; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(31,53,80,.08); }.v2-source-search > button, .v2-source-policy-cell button { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #cbd8e8; border-radius: 7px; background: #fff; padding: 0 12px; color: #355272; cursor: pointer; font-size: 10px; }.v2-source-diagnostic button:disabled { cursor: not-allowed; opacity: .5; } .v2-source-search { position: relative; display: flex; gap: 8px; padding: 12px 14px; }.v2-source-search > label { display: flex; min-width: 280px; flex: 1; height: 36px; align-items: center; gap: 8px; border: 1px solid #cbd8e8; border-radius: 8px; padding: 0 11px; color: #6c7c91; }.v2-source-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; }.v2-source-search > button { height: 36px; border-color: #2f6fe4; background: #2f6fe4; color: #fff; }.v2-source-candidates { position: absolute; z-index: 12; top: 51px; right: 114px; left: 14px; max-height: 310px; overflow: auto; border: 1px solid #d6e0ec; border-radius: 9px; background: #fff; box-shadow: 0 12px 32px rgba(31,53,80,.18); }.v2-source-candidates > button { display: grid; width: 100%; grid-template-columns: 150px minmax(180px,1fr) auto; gap: 10px; border: 0; border-bottom: 1px solid #edf1f6; background: #fff; padding: 10px 12px; text-align: left; cursor: pointer; }.v2-source-candidates > button:hover { background: #f5f9ff; }.v2-source-candidates strong { font-size: 11px; }.v2-source-candidates span, .v2-source-candidates em, .v2-source-candidates p { color: var(--v2-muted); font-size: 9px; font-style: normal; }.v2-source-candidates p { margin: 0; padding: 14px; }.v2-source-candidates footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5ebf3; background: #fff; padding: 7px 10px; }.v2-source-candidates footer div { display: flex; gap: 5px; }.v2-source-candidates footer button { border: 1px solid #d2dce8; border-radius: 5px; background: #fff; padding: 4px 8px; color: #52657d; font-size: 8px; } .v2-source-empty { display: grid; min-height: 110px; place-content: center; gap: 6px; color: var(--v2-muted); text-align: center; }.v2-source-empty strong { color: #42556e; font-size: 13px; }.v2-source-empty span { font-size: 10px; }.v2-source-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #e7edf4; background: #fafcff; }.v2-source-summary article { min-width: 0; padding: 11px 14px; }.v2-source-summary article + article { border-left: 1px solid #e7edf4; }.v2-source-summary small, .v2-source-summary span { display: block; overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.v2-source-summary strong { display: block; margin: 5px 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.v2-source-recommendation { margin: 12px 14px 8px; border-left: 3px solid #2f6fe4; border-radius: 6px; background: #f3f7ff; padding: 9px 11px; }.v2-source-recommendation strong { font-size: 10px; }.v2-source-recommendation p { margin: 4px 0; color: #405774; font-size: 9px; line-height: 1.5; }.v2-source-recommendation span, .v2-source-readonly { color: #728299; font-size: 8px; }.v2-source-readonly { margin: 0 14px 8px; border-radius: 6px; background: #fff8e8; padding: 7px 9px; color: #966500; } .v2-source-table-wrap { margin: 0 14px 12px; overflow: auto; border: 1px solid #dfe7f0; border-radius: 8px; }.v2-source-table { width: 100%; min-width: 1320px; border-collapse: collapse; table-layout: fixed; }.v2-source-table th { height: 34px; background: #f6f8fb; color: #63748a; font-size: 8px; text-align: left; }.v2-source-table th, .v2-source-table td { border-bottom: 1px solid #e8edf3; padding: 7px 9px; vertical-align: top; }.v2-source-table tbody tr:last-child td { border-bottom: 0; }.v2-source-table tbody tr.is-recommended { background: #f4fbf8; }.v2-source-table td { color: #3e5067; font-size: 9px; line-height: 1.45; }.v2-source-table td > strong, .v2-source-table td > span { display: block; }.v2-source-table td > span { margin-top: 3px; color: var(--v2-muted); }.v2-source-table td > i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #9aa7b8; }.v2-source-table td > i.is-online { background: var(--v2-green); }.v2-source-table td > i.is-offline { background: #94a3b8; }.v2-source-reason span { max-width: 230px; white-space: normal !important; }.v2-source-policy-cell { display: grid; grid-template-columns: auto 64px; gap: 5px; }.v2-source-policy-cell label { display: flex; align-items: center; gap: 4px; }.v2-source-policy-cell input[type=number], .v2-source-policy-cell input[type=text], .v2-source-policy-cell > input:not([type]) { min-width: 0; height: 26px; border: 1px solid #ccd7e5; border-radius: 5px; padding: 0 6px; font-size: 9px; }.v2-source-policy-cell > .v2-source-provider-input, .v2-source-policy-cell > .v2-source-provider-evidence-input, .v2-source-policy-cell > .v2-source-policy-remark-input { grid-column: 1 / -1; }.v2-source-policy-cell button { grid-column: 1 / -1; height: 27px; }.v2-source-policy-cell em { grid-column: 1 / -1; color: var(--v2-red); font-size: 8px; font-style: normal; }.v2-source-audit { margin: 0 14px 14px; border: 1px solid #e0e7f0; border-radius: 8px; }.v2-source-audit > header { display: flex; height: 34px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7edf4; padding: 0 10px; }.v2-source-audit > header strong { font-size: 10px; }.v2-source-audit > header span, .v2-source-audit > p { color: var(--v2-muted); font-size: 8px; }.v2-source-audit > p { margin: 0; padding: 12px; }.v2-source-audit ol { max-height: 170px; margin: 0; overflow: auto; padding: 0; list-style: none; }.v2-source-audit li { display: grid; min-height: 34px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #edf1f6; padding: 5px 10px; font-size: 9px; }.v2-source-audit li em { color: var(--v2-muted); font-size: 8px; font-style: normal; } .v2-vehicle-search-page, .v2-not-found { display: grid; min-height: 100%; place-items: center; padding: 28px; } .v2-vehicle-search-card { width: min(660px, 100%); border: 1px solid var(--v2-border); border-radius: 16px; background: #fff; padding: 54px; text-align: center; box-shadow: var(--v2-shadow); } .v2-search-hero-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 18px; place-items: center; border-radius: 15px; background: var(--v2-blue-soft); color: var(--v2-blue); } .v2-vehicle-search-card h2, .v2-not-found h2 { margin: 0; font-size: 22px; } .v2-vehicle-search-card > p, .v2-not-found p { margin: 10px auto 26px; color: var(--v2-muted); font-size: 13px; line-height: 1.7; } .v2-vehicle-search-card form { display: flex; height: 46px; align-items: center; gap: 10px; border: 1px solid #cfd9e7; border-radius: 9px; padding-left: 14px; color: #8a98aa; } .v2-vehicle-search-card form:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 4px rgba(18,104,243,.08); } .v2-vehicle-search-card input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--v2-text); } .v2-vehicle-search-card button, .v2-not-found a { display: inline-flex; height: 46px; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: var(--v2-blue); padding: 0 20px; color: #fff; text-decoration: none; cursor: pointer; font-weight: 700; } .v2-vehicle-search-card .v2-profile-sync-open { height: 32px; margin-top: 16px; border: 1px solid #d5e3f7; background: #f6f9fe; color: var(--v2-blue); font-size: 10px; font-weight: 600; } .v2-vehicle-search-page.has-sync-panel { align-content: center; gap: 14px; overflow: auto; } .v2-profile-sync-panel { width: min(900px, 100%); border: 1px solid var(--v2-border); border-radius: 12px; background: #fff; padding: 16px; box-shadow: var(--v2-shadow); } .v2-profile-sync-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.v2-profile-sync-panel > header strong { font-size: 14px; }.v2-profile-sync-panel > header p { margin: 5px 0 0; color: var(--v2-muted); font-size: 9px; }.v2-profile-sync-panel > header button { border: 0; background: transparent; color: var(--v2-muted); cursor: pointer; font-size: 9px; } .v2-profile-sync-fields { display: grid; grid-template-columns: 1fr 1fr .8fr 1.2fr; gap: 10px; margin-top: 14px; }.v2-profile-sync-fields label { display: grid; min-width: 0; gap: 5px; color: var(--v2-muted); font-size: 9px; }.v2-profile-sync-fields input, .v2-profile-sync-fields select { min-width: 0; height: 34px; border: 1px solid var(--v2-border); border-radius: 6px; background: #fff; padding: 0 9px; color: var(--v2-text); font-size: 10px; }.v2-profile-sync-fields input[type="file"] { padding: 6px; } .v2-profile-sync-format, .v2-profile-sync-file, .v2-profile-sync-error, .v2-profile-sync-warning { margin: 10px 0 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }.v2-profile-sync-format code { overflow-wrap: anywhere; color: #53657c; }.v2-profile-sync-file { color: var(--v2-blue); }.v2-profile-sync-error { color: var(--v2-red); }.v2-profile-sync-warning { border-radius: 6px; background: #fff7ed; padding: 7px 9px; color: #b45309; } .v2-profile-sync-result { margin-top: 12px; border: 1px solid #e4ebf4; border-radius: 8px; background: #fbfcfe; padding: 10px; }.v2-profile-sync-result > div { display: grid; grid-template-columns: repeat(6,1fr); }.v2-profile-sync-result > div span { color: var(--v2-muted); text-align: center; font-size: 8px; }.v2-profile-sync-result > div strong { display: block; margin-top: 4px; color: var(--v2-text); font-size: 14px; }.v2-profile-sync-result > p { margin: 8px 0 0; color: var(--v2-green); font-size: 9px; }.v2-profile-sync-result ul { max-height: 104px; margin: 9px 0 0; overflow: auto; border-top: 1px solid #e7edf5; padding: 5px 0 0; list-style: none; }.v2-profile-sync-result li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 2px; font-size: 8px; }.v2-profile-sync-result li span { color: var(--v2-muted); } .v2-profile-sync-panel > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }.v2-profile-sync-panel > footer button { height: 32px; border: 1px solid var(--v2-border); border-radius: 6px; background: #fff; padding: 0 12px; color: var(--v2-text); cursor: pointer; font-size: 9px; }.v2-profile-sync-panel > footer button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-profile-sync-panel > footer button:disabled { cursor: not-allowed; opacity: .5; } .v2-not-found { align-content: center; text-align: center; color: var(--v2-muted); } .v2-not-found a { height: 38px; margin: 0 auto; } .v2-page-error { padding: 18px; } .v2-vehicle-record-page { display: flex; min-height: 100%; flex-direction: column; gap: 12px; padding: 12px 16px 16px; } .v2-identity-band { display: grid; min-height: 96px; grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.25fr) auto; align-items: center; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-identity-primary, .v2-identity-meta, .v2-identity-actions { min-width: 0; padding: 15px 18px; } .v2-identity-primary { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 14px; } .v2-plate { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid #b9d2fb; border-radius: 7px; background: var(--v2-blue-soft); padding: 0 12px; color: var(--v2-blue); font-size: 16px; font-weight: 800; } .v2-online-label { display: inline-flex; align-items: center; gap: 6px; color: #8793a5; font-size: 11px; font-weight: 700; } .v2-online-label i { width: 7px; height: 7px; border-radius: 50%; background: #aab3c0; } .v2-online-label.is-online { color: var(--v2-green); } .v2-online-label.is-online i { background: var(--v2-green); } .v2-identity-primary small { grid-row: 2; color: var(--v2-muted); font-size: 9px; } .v2-identity-primary b { grid-row: 2; overflow: hidden; color: #445166; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-identity-primary button { grid-row: 2; border: 0; background: transparent; color: #718096; cursor: pointer; } .v2-identity-meta { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; align-items: center; border-right: 1px solid var(--v2-border); border-left: 1px solid var(--v2-border); } .v2-identity-meta > div + div { border-left: 1px solid var(--v2-border); padding-left: 22px; } .v2-identity-meta small { color: var(--v2-muted); font-size: 10px; } .v2-identity-meta p { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; } .v2-identity-meta p span, .v2-telemetry-card footer span { border: 1px solid #dde5ef; border-radius: 5px; background: #f7f9fc; padding: 3px 7px; color: #526176; font-size: 9px; } .v2-identity-meta strong { display: block; margin-top: 8px; color: #445166; font-size: 11px; font-variant-numeric: tabular-nums; } .v2-identity-actions { display: flex; gap: 8px; } .v2-identity-actions a { display: inline-flex; height: 38px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 14px; color: #536177; text-decoration: none; white-space: nowrap; font-size: 10px; font-weight: 700; } .v2-identity-actions a:hover { border-color: #a8c7f9; color: var(--v2-blue); } .v2-record-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(520px, 1.75fr) minmax(300px, 1fr); grid-template-rows: minmax(300px, 1.05fr) minmax(270px, .95fr); gap: 12px; } .v2-record-card.semi-card, .v2-single-map-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,80,.045); } .v2-record-card.semi-card { content-visibility: auto; contain-intrinsic-size: auto 320px; } .v2-single-map-card { position: relative; min-height: 300px; } .v2-single-map-card > .semi-card-body { display: flex; min-height: 300px; height: 100%; flex-direction: column; } .v2-single-map-card .v2-fleet-map { flex: 1; } .v2-single-map-card .v2-map-legend { display: none; } .v2-single-map-card footer { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e5ebf2; background: #fbfcfe; padding: 0 14px; color: #64748b; font-size: 9px; } .v2-single-map-card footer span { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-map-source-link { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; border: 0; background: transparent; padding: 0; color: #64748b; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: inherit; } .v2-single-map-card footer time { white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-archive-card { grid-column: 2; grid-row: 2; } .v2-record-list { margin: 0; padding: 8px 14px 4px; } .v2-record-list > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); padding: 6px 0; font-size: 10px; } .v2-record-list dt { color: var(--v2-muted); } .v2-record-list dd { margin: 0; overflow-wrap: anywhere; } .v2-record-list dd i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #aab3c0; } .v2-record-list dd i.is-online { background: var(--v2-green); } .v2-record-note { margin: 3px 14px 12px; border-radius: 6px; background: #f7f9fc; padding: 8px 10px; color: #79869a; font-size: 8px; line-height: 1.5; } .v2-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; padding: 10px 14px 12px; }.v2-profile-form label { display: grid; gap: 3px; color: var(--v2-muted); font-size: 8px; }.v2-profile-form input, .v2-profile-form select { min-width: 0; height: 29px; border: 1px solid var(--v2-border); border-radius: 5px; background: #fff; padding: 0 7px; color: var(--v2-text); font-size: 9px; }.v2-profile-form > p { grid-column: 1 / -1; margin: 0; color: var(--v2-red); font-size: 8px; }.v2-profile-form footer { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 7px; }.v2-profile-form footer button { height: 28px; border: 1px solid var(--v2-border); border-radius: 5px; background: #fff; padding: 0 10px; font-size: 9px; cursor: pointer; }.v2-profile-form footer button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; } .v2-live-overview.semi-card { border-color: #cfddf0; background: linear-gradient(135deg,#fff 0%,#fbfdff 72%,#f3f8ff 100%); content-visibility: visible; } .v2-live-overview .v2-live-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } .v2-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .v2-live-grid > div { min-width: 0; padding: 12px 14px; } .v2-live-grid > div + div { border-left: 1px solid var(--v2-border); } .v2-live-grid > div:nth-child(4) { border-left: 0; } .v2-live-grid > div:nth-child(n+4) { border-top: 1px solid var(--v2-border); } .v2-live-overview .v2-live-grid > div:nth-child(4) { border-left: 1px solid var(--v2-border); } .v2-live-overview .v2-live-grid > div:nth-child(n+4) { border-top: 0; } .v2-live-grid small { display: block; color: var(--v2-muted); font-size: 9px; } .v2-live-grid strong { display: block; margin-top: 5px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-live-grid strong.is-text { font-size: 14px; } .v2-live-source-link { margin-top: 5px; font-size: 17px; font-variant-numeric: tabular-nums; } .v2-live-grid em { margin-left: 3px; color: var(--v2-muted); font-size: 8px; font-style: normal; font-weight: 500; } .v2-current-location { display: grid; min-height: 52px; grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); border-top: 1px solid var(--v2-border); } .v2-current-location > span { display: grid; min-width: 0; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 8px; padding: 8px 14px; color: #64748b; } .v2-current-location > span + span { border-left: 1px solid var(--v2-border); } .v2-current-location small { color: var(--v2-muted); font-size: 9px; white-space: nowrap; } .v2-current-location strong { min-width: 0; overflow: hidden; color: #3d4c62; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-current-location button { width: max-content; max-width: 100%; height: 28px; overflow: hidden; border: 1px solid #bfd4f6; border-radius: 6px; background: #f3f7ff; padding: 0 9px; color: var(--v2-blue); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; } .v2-current-location button.is-error { border-color: #edb5b0; background: #fff; color: var(--v2-red); } .v2-current-address { grid-template-columns: auto minmax(0,1fr) auto !important; } .v2-telemetry-card { grid-column: 1; grid-row: 2; } .v2-telemetry-tabs { border-bottom: 1px solid var(--v2-border); background: linear-gradient(180deg,#fbfcfe 0%,#f8faff 100%); } .v2-segmented-tabs { display: flex; min-width: 0; align-items: center; overflow-x: auto; scrollbar-width: none; } .v2-segmented-tabs::-webkit-scrollbar { display: none; } .v2-segmented-tabs > .semi-button { flex: 0 0 auto; } .v2-segmented-tab-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .v2-segmented-tab-label > svg { flex: 0 0 auto; } .v2-segmented-tab-count { display: inline-grid; min-width: 20px; min-height: 18px; place-items: center; border-radius: 10px; background: rgba(100,116,139,.10); padding: 1px 6px; color: #7c8a9d; font-size: 8px; font-style: normal; font-variant-numeric: tabular-nums; } .v2-telemetry-protocols, .v2-telemetry-categories { display: flex; align-items: center; overflow-x: auto; padding: 0 10px; scrollbar-width: none; } .v2-telemetry-protocols::-webkit-scrollbar, .v2-telemetry-categories::-webkit-scrollbar { display: none; } .v2-telemetry-protocols { min-height: 48px; gap: 7px; border-bottom: 1px solid #e8edf4; padding-block: 5px; } .v2-telemetry-protocols .semi-button { min-width: 112px; min-height: 36px; flex: 0 0 auto; justify-content: center; border-radius: 8px; color: #64748b; font-size: 11px; } .v2-telemetry-protocols .semi-button.is-active { background: #1268f3; color: #fff; box-shadow: 0 4px 12px rgba(18,104,243,.18); font-weight: 700; } .v2-telemetry-protocols .semi-button.is-active .v2-segmented-tab-count { background: rgba(255,255,255,.18); color: #fff; } .v2-telemetry-categories { min-height: 39px; gap: 2px; background: #fff; } .v2-telemetry-categories .semi-button { position: relative; min-width: 86px; min-height: 34px; flex: 0 0 auto; justify-content: center; padding: 0 10px; border-radius: 0; color: #708096; font-size: 10px; } .v2-telemetry-categories .semi-button.is-active { color: var(--v2-blue); font-weight: 700; } .v2-telemetry-categories .semi-button.is-active::after { position: absolute; right: 10px; bottom: -3px; left: 10px; height: 2px; border-radius: 2px; background: var(--v2-blue); content: ''; } .v2-telemetry-categories .semi-button.is-active .v2-segmented-tab-count { background: var(--v2-blue-soft); color: var(--v2-blue); } .v2-telemetry-list { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 14px; } .v2-telemetry-list > div { display: grid; min-width: 0; grid-template-columns: minmax(130px, 1fr) auto 58px; align-items: center; gap: 10px; border-bottom: 1px solid #eef2f7; padding: 9px 8px; font-size: 10px; } .v2-telemetry-list > div:nth-child(odd) { border-right: 1px solid var(--v2-border); } .v2-telemetry-list > div > span { min-width: 0; color: #556276; } .v2-telemetry-list > div > span small { display: block; margin-top: 3px; overflow: hidden; color: #a0aaba; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-list strong { font-size: 10px; font-variant-numeric: tabular-nums; } .v2-telemetry-list strong em { color: #8a96a8; font-size: 8px; font-style: normal; font-weight: 500; } .v2-telemetry-list time { display: grid; justify-items: end; gap: 3px; color: #8a96a8; font-size: 8px; text-align: right; } .v2-telemetry-list time i { border-radius: 8px; background: #eef2f7; padding: 1px 5px; color: #778397; font-size: 7px; font-style: normal; } .v2-telemetry-list time i.is-good { background: #e8f8f1; color: #16845b; } .v2-telemetry-list time i.is-stale { background: #fff6df; color: #a66b00; } .v2-telemetry-list time i.is-warning { background: #fff0f0; color: var(--v2-red); } .v2-telemetry-list .v2-empty-compact { display: flex; min-height: 94px; grid-column: 1 / -1; justify-content: center; border: 0; } .v2-telemetry-list .v2-empty-compact.is-error { color: var(--v2-red); } .v2-telemetry-card footer { display: flex; align-items: center; gap: 6px; margin: 8px 10px 10px; border: 1px solid var(--v2-border); border-radius: 7px; padding: 8px 10px; color: #718096; font-size: 9px; } .v2-telemetry-card footer b { color: #526176; font-size: 9px; } .v2-telemetry-card footer small { margin-left: auto; color: #8a96a8; font-size: 8px; } .v2-events-card { grid-column: 2; grid-row: 1; } .v2-event-list { padding: 2px 14px 8px; } .v2-event-row { position: relative; display: grid; min-height: 40px; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; } .v2-event-row:not(:last-child)::after { position: absolute; top: 31px; bottom: -9px; left: 10px; width: 1px; background: var(--v2-border); content: ''; } .v2-event-icon { z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #eef3f8; color: #8492a6; } .v2-event-row.is-success .v2-event-icon { background: #e8f8f1; color: var(--v2-green); } .v2-event-row.is-error .v2-event-icon { background: #fff0f0; color: var(--v2-red); } .v2-event-row.is-warning .v2-event-icon { background: #fff7e5; color: var(--v2-orange); } .v2-event-row strong { font-size: 9px; } .v2-event-row p { margin: 2px 0 0; overflow: hidden; color: #7f8b9d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-event-row time { color: #8d99aa; font-size: 8px; font-variant-numeric: tabular-nums; } .v2-empty-compact { display: flex; min-height: 80px; align-items: center; color: var(--v2-muted); font-size: 10px; } .v2-history-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 16px 16px; } .v2-history-filter-card.semi-card { flex: 0 0 auto; overflow: visible; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-toolbar { display: grid; grid-template-columns: minmax(230px, 1.1fr) minmax(350px, 1.5fr) 120px 130px auto auto auto; align-items: end; gap: 8px; border: 0; background: transparent; padding: 10px 12px; } .v2-history-toolbar label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--v2-muted); font-size: 8px; } .v2-history-toolbar label > div { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 9px; color: #8996a8; } .v2-history-toolbar input, .v2-history-toolbar select { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; } .v2-history-toolbar label > div input { height: auto; flex: 1; border: 0; padding: 0; } .v2-history-toolbar input:focus, .v2-history-toolbar select:focus, .v2-history-toolbar label > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-history-range { min-width: 0; margin: 0; border: 0; padding: 0; } .v2-history-range legend { margin-bottom: 5px; padding: 0; color: var(--v2-muted); font-size: 8px; } .v2-history-range > div { display: grid; height: 34px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; } .v2-history-range > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-history-range > div input { width: 100%; height: 32px; border: 0; border-radius: 0; padding: 0 8px; box-shadow: none; } .v2-history-range > div span { color: #8794a5; font-size: 8px; } .v2-history-toolbar button { height: 34px; padding: 0 11px; white-space: nowrap; } .v2-history-toolbar button:disabled { opacity: .45; cursor: not-allowed; } .v2-history-metrics-card.semi-card { min-height: 42px; flex: 0 0 auto; overflow: hidden; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-metrics { display: grid; min-height: 42px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; overflow: hidden; background: #fff; padding: 6px 11px; } .v2-history-metrics > strong { margin-right: 4px; white-space: nowrap; font-size: 10px; } .v2-history-metric-scroll { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; overscroll-behavior-inline: contain; } .v2-history-metric-tag.semi-tag { height: 28px; flex: 0 0 auto; border: 1px solid #b8d1fa; border-radius: 7px; padding-inline: 9px 6px; color: var(--v2-blue); font-size: 9px; font-weight: 600; } .v2-history-metric-tag.semi-tag:hover { border-color: #8bb5f8; background: #e8f2ff; } .v2-history-metric-tag .semi-tag-close { margin-left: 5px; border-radius: 50%; color: #5b83be; } .v2-history-metric-scroll > span { flex: 0 0 auto; color: var(--v2-muted); font-size: 8px; } .v2-history-metrics > button.v2-history-metrics-manage { border-color: #cddcf0; color: #526987; font-weight: 700; } .v2-history-metrics > button.v2-history-metrics-manage:disabled { opacity: .4; cursor: not-allowed; } .v2-history-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(660px, 1fr) 310px; gap: 10px; } .v2-history-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 58px 205px minmax(260px, 1fr); gap: 9px; } .v2-history-summary.semi-card { overflow: hidden; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-summary > .semi-card-body { display: grid; height: 100%; grid-template-columns: repeat(4, 1fr); } .v2-history-summary > .semi-card-body > div { position: relative; display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 0 16px; } .v2-history-summary > .semi-card-body > div + div::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; } .v2-history-summary small { color: var(--v2-muted); font-size: 8px; } .v2-history-summary strong { margin-top: 5px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .v2-history-trend.semi-card { min-height: 0; overflow: hidden; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-trend > .semi-card-body { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-history-trend-panels { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: auto; padding: 8px 10px 5px; } .v2-history-trend-panels article { min-width: 0; overflow: hidden; border: 1px solid #e6ebf2; border-radius: 6px; } .v2-history-trend-panels article > header { display: flex; height: 25px; align-items: center; justify-content: space-between; padding: 0 8px; background: #f8fafc; } .v2-history-trend-panels article > header strong { font-size: 9px; } .v2-history-trend-panels article > header span { color: var(--v2-muted); font-size: 7px; } .v2-history-trend-panels svg { display: block; width: 100%; height: 105px; } .v2-history-trend-panels article > footer { display: flex; min-height: 22px; align-items: center; gap: 5px 10px; overflow-x: auto; padding: 0 8px; color: #657286; font-size: 7px; white-space: nowrap; } .v2-history-trend-panels article > footer span { display: inline-flex; align-items: center; gap: 4px; } .v2-history-trend-panels article > footer i { width: 10px; height: 2px; flex: 0 0 auto; } .v2-chart-grid line { stroke: #e9eef5; stroke-width: 1; vector-effect: non-scaling-stroke; } .v2-chart-axis text { fill: #7b8798; font-size: 8px; font-variant-numeric: tabular-nums; } .v2-chart-axis text:first-child, .v2-chart-axis text:nth-child(2) { text-anchor: end; } .v2-history-chart-empty { display: flex; flex: 1; align-items: center; justify-content: center; color: var(--v2-muted); font-size: 9px; } .v2-history-trend-evidence { display: block; flex: 0 0 auto; overflow: hidden; border-top: 1px solid #eef2f7; padding: 4px 10px; color: var(--v2-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-history-table-card.semi-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-table-card > .semi-card-body { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-history-table-card > .semi-card-body > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 10px 0 12px; } .v2-history-table-card > .semi-card-body > header strong { font-size: 10px; } .v2-history-table-card > .semi-card-body > header div { display: flex; gap: 6px; } .v2-history-table-card > .semi-card-body > header button, .v2-history-table-card > .semi-card-body > header select { display: inline-flex; height: 27px; align-items: center; gap: 5px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 8px; color: #657286; cursor: pointer; font-size: 8px; } .v2-history-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-history-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 8px; } .v2-history-table-scroll th { position: sticky; z-index: 3; top: 0; height: 31px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; white-space: nowrap; font-weight: 700; } .v2-history-table-scroll td, .v2-history-table-scroll th { max-width: 170px; border-right: 1px solid #eef2f7; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-history-table-scroll td { height: 30px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; } .v2-history-table-card.is-comfortable .v2-history-table-scroll td { height: 40px; } .v2-history-table-scroll tr:hover td, .v2-history-table-scroll tr.is-selected td { background: #f2f7ff; } .v2-history-table-scroll td button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 8px; } .v2-history-table-scroll td.v2-history-quality-reason { max-width: 260px; color: #66758a; } .v2-history-table-scroll input { width: 13px; height: 13px; accent-color: var(--v2-blue); } .v2-quality { display: inline-flex; align-items: center; gap: 5px; } .v2-quality i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); } .v2-quality:not(.is-normal) i { background: var(--v2-orange); } .v2-history-loading { position: sticky; left: 0; display: flex; min-height: 90px; align-items: center; justify-content: center; gap: 7px; color: #607086; font-size: 9px; } .v2-history-loading i { width: 13px; height: 13px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } .v2-history-empty { position: sticky; left: 0; display: flex; min-height: 90px; align-items: center; justify-content: center; color: var(--v2-muted); font-size: 9px; } .v2-history-table-card > .semi-card-body > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 10px; color: #657286; font-size: 8px; } .v2-history-table-card > .semi-card-body > footer div { display: flex; gap: 5px; } .v2-history-table-card > .semi-card-body > footer button, .v2-history-table-card > .semi-card-body > footer select { height: 26px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 8px; color: #5f6e83; font-size: 8px; } .v2-history-table-card > .semi-card-body > footer button:disabled { opacity: .35; } .v2-history-side { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .v2-history-side > .semi-card { overflow: hidden; border-color: var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-side > .semi-card + .semi-card { margin-top: 9px; } .v2-history-evidence > .semi-card-body > dl { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--v2-border); } .v2-history-evidence > .semi-card-body > dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); padding: 5px 0; font-size: 8px; } .v2-history-evidence dt { color: #7f8c9f; } .v2-history-evidence dd { margin: 0; overflow-wrap: anywhere; text-align: right; } .v2-history-evidence dd i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--v2-green); } .v2-history-evidence dd i.is-warning { background: var(--v2-orange); } .v2-history-evidence dd i.is-error, .v2-history-evidence dd i.is-critical { background: var(--v2-red); } .v2-history-evidence .v2-history-quality-detail { align-items: start; } .v2-history-evidence .v2-history-quality-detail dd { color: #5c6b80; line-height: 1.5; white-space: normal; } .v2-evidence-values { padding: 10px 12px; } .v2-evidence-values > strong { display: block; margin-bottom: 5px; font-size: 9px; } .v2-evidence-values > p { margin: 10px 0; color: var(--v2-muted); font-size: 8px; text-align: center; } .v2-evidence-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f7; padding: 6px 0; } .v2-evidence-values span { min-width: 0; color: #617087; font-size: 8px; } .v2-evidence-values span small { display: block; margin-top: 2px; overflow: hidden; color: #a0aaba; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; } .v2-evidence-values b { font-size: 8px; font-weight: 600; } .v2-history-evidence > .semi-card-body > footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--v2-border); padding: 9px 12px; color: #718096; font-size: 8px; } .v2-history-evidence > .semi-card-body > footer b { overflow: hidden; color: var(--v2-blue); text-overflow: ellipsis; white-space: nowrap; } .v2-history-side-empty { display: flex; min-height: 92px; align-items: center; justify-content: center; padding: 14px; color: var(--v2-muted); text-align: center; font-size: 8px; line-height: 1.6; } .v2-export-jobs > .semi-card-body > div { padding: 4px 11px 8px; } .v2-export-jobs article { display: grid; min-height: 54px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f7; } .v2-export-jobs article > i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; } .v2-export-jobs article > i.is-running { background: var(--v2-blue); } .v2-export-jobs article > i.is-completed { background: var(--v2-green); } .v2-export-jobs article > i.is-failed { background: var(--v2-red); } .v2-export-jobs article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-export-jobs article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-export-jobs article small { overflow: hidden; color: #8290a3; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-export-jobs article small.v2-export-owner { color: #64748b; } .v2-export-jobs article .v2-export-download { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; color: var(--v2-blue); cursor: pointer; font-size: 7px; } .v2-export-jobs article .v2-export-download:disabled { opacity: .55; cursor: wait; } .v2-export-jobs article em { color: #7f8c9f; font-size: 7px; font-style: normal; } .v2-access-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 9px; overflow: hidden; padding: 12px 14px 14px; } .v2-access-filter { display: grid; flex: 0 0 auto; grid-template-columns: minmax(210px, 1.15fr) repeat(4, minmax(120px, .7fr)) auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 9px 11px; box-shadow: var(--v2-shadow); } .v2-access-filter label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--v2-muted); font-size: 8px; } .v2-access-filter label > div { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 6px; padding: 0 9px; color: #8996a8; } .v2-access-filter input, .v2-access-filter select { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; } .v2-access-filter label > div input { height: auto; flex: 1; border: 0; padding: 0; } .v2-access-filter label > div:focus-within, .v2-access-filter select:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-access-filter button { height: 34px; white-space: nowrap; } .v2-access-advanced { grid-column: 1 / -1; border-top: 1px solid var(--v2-border); padding-top: 6px; } .v2-access-advanced summary { width: fit-content; color: var(--v2-blue); font-size: 9px; cursor: pointer; } .v2-access-advanced > div { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px; padding-top: 8px; } .v2-access-kpis { display: grid; min-height: 68px; flex: 0 0 auto; grid-template-columns: repeat(7, minmax(82px, 1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-access-kpis button { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-content: center; border: 0; background: #fff; padding: 9px 15px; text-align: left; cursor: pointer; } .v2-access-kpis button + button::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; } .v2-access-kpis button:hover { background: #f8fbff; } .v2-access-kpis small { grid-column: 1 / -1; color: var(--v2-muted); font-size: 9px; } .v2-access-kpis strong { margin-top: 6px; overflow: hidden; font-size: 19px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-access-kpis em { align-self: end; color: #7f8c9f; font-size: 8px; font-style: normal; } .v2-access-kpis .is-online strong, .v2-access-kpis .is-today strong { color: var(--v2-green); } .v2-access-kpis .is-delay strong { color: var(--v2-orange); } .v2-access-kpis .is-identity strong { color: #a65a12; } .v2-access-kpis .is-never strong, .v2-access-kpis .is-offline strong { color: #64748b; } .v2-access-protocols { flex: 0 0 auto; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 9px 12px 10px; box-shadow: var(--v2-shadow); } .v2-access-protocols header { display: flex; align-items: center; justify-content: space-between; } .v2-access-protocols header strong { font-size: 10px; } .v2-access-protocols header span { color: var(--v2-muted); font-size: 7px; } .v2-access-segments { display: flex; height: 6px; gap: 2px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: #edf1f6; } .v2-access-segments i { display: block; min-width: 2px; height: 100%; } .v2-access-legends { display: flex; gap: 20px; margin-top: 8px; overflow-x: auto; color: #657286; font-size: 7px; white-space: nowrap; } .v2-access-legends span { display: inline-flex; align-items: center; gap: 5px; } .v2-access-legends span > i { width: 6px; height: 6px; border-radius: 50%; } .v2-access-legends b { color: #455268; font-weight: 700; } .v2-access-legends em { color: #8a97a9; font-style: normal; } .v2-access-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(680px, 1fr) 300px; gap: 9px; } .v2-access-identity-queue { flex: 0 0 auto; border: 1px solid #efd7b5; border-radius: var(--v2-radius); background: #fffaf3; color: var(--v2-text); } .v2-access-identity-queue summary { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; cursor: pointer; list-style-position: inside; } .v2-access-identity-queue summary span { display: inline-flex; align-items: center; gap: 8px; } .v2-access-identity-queue summary strong { min-width: 22px; border-radius: 12px; background: #a65a12; padding: 2px 7px; color: #fff; font-size: 10px; text-align: center; } .v2-access-identity-queue summary em { color: #8a6440; font-size: 10px; font-style: normal; } .v2-access-identity-queue > div { display: grid; max-height: 112px; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 7px; overflow: auto; border-top: 1px solid #efd7b5; padding: 7px; } .v2-access-identity-queue article { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; border: 1px solid #f0dfc7; border-radius: 7px; background: #fff; padding: 7px 8px; } .v2-access-identity-code { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-access-identity-queue article dl { display: grid; min-width: 0; grid-column: 1 / -1; gap: 2px; margin: 0; } .v2-access-identity-queue article dl div { display: grid; min-width: 0; grid-template-columns: 45px minmax(0, 1fr); gap: 4px; } .v2-access-identity-queue article dt, .v2-access-identity-queue article dd { overflow: hidden; margin: 0; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-identity-queue article button { grid-column: 2; grid-row: 1; border: 0; background: transparent; color: var(--v2-blue); font-size: 9px; cursor: pointer; } .v2-access-table-card { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-access-table-card > header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 9px 0 12px; } .v2-access-table-card > header strong { font-size: 10px; } .v2-access-table-card > header div { display: flex; align-items: center; gap: 5px; } .v2-access-table-card > header span { margin-right: 5px; color: var(--v2-muted); font-size: 7px; } .v2-access-table-card > header button { display: inline-flex; height: 26px; align-items: center; gap: 4px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #657286; cursor: pointer; font-size: 7px; } .v2-access-table-card > header button:disabled { opacity: .4; cursor: not-allowed; } .v2-access-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-access-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 7px; } .v2-access-table-scroll th { position: sticky; z-index: 3; top: 0; height: 32px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; font-weight: 700; } .v2-access-table-scroll th, .v2-access-table-scroll td { max-width: 150px; border-right: 1px solid #eef2f7; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-access-table-scroll td { height: 31px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; } .v2-access-table-scroll tr:hover td, .v2-access-table-scroll tr.is-selected td { background: #f2f7ff; } .v2-access-table-scroll input { width: 12px; height: 12px; accent-color: var(--v2-blue); } .v2-access-table-scroll td > button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 7px; } .v2-access-table-scroll td.is-good { color: var(--v2-green); } .v2-access-table-scroll td.is-danger { color: var(--v2-red); } .v2-access-status { display: inline-flex; align-items: center; gap: 5px; color: #64748b; white-space: nowrap; } .v2-access-status i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; } .v2-access-status.is-online { color: var(--v2-green); } .v2-access-status.is-online i { background: var(--v2-green); } .v2-access-status.is-offline i { background: #7b8798; } .v2-access-status.is-never_reported i { background: #aab3c0; } .v2-access-status.is-unknown i { background: var(--v2-orange); } .v2-access-loading, .v2-access-empty { position: sticky; left: 0; display: flex; min-height: 72px; align-items: center; justify-content: center; gap: 7px; color: var(--v2-muted); font-size: 8px; } .v2-access-loading { position: absolute; inset: 32px 0 auto; min-height: 34px; background: rgba(255,255,255,.88); backdrop-filter: blur(2px); } .v2-access-loading i { width: 12px; height: 12px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } .v2-access-table-card > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 9px; color: #657286; font-size: 7px; } .v2-access-table-card > footer div { display: flex; gap: 5px; } .v2-access-table-card > footer button, .v2-access-table-card > footer select { height: 25px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #5f6e83; font-size: 7px; } .v2-access-table-card > footer button:disabled { opacity: .35; } .v2-access-side { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .v2-access-side > section { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-access-side > section + section { margin-top: 9px; } .v2-access-side section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 11px; } .v2-access-side section > header strong { font-size: 10px; } .v2-access-side section > header span { font-size: 7px; } .v2-access-identity { margin: 0; padding: 7px 11px 3px; } .v2-access-identity > div, .v2-access-inspector section dl > div { display: grid; grid-template-columns: 77px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 7px; } .v2-access-inspector dt { color: #7e8b9e; } .v2-access-inspector dd { margin: 0; overflow-wrap: anywhere; color: #46546a; text-align: right; } .v2-access-inspector dd.is-good { color: var(--v2-green); } .v2-access-inspector dd.is-danger { color: var(--v2-red); } .v2-access-vehicle-link { display: block; margin: 3px 11px 9px; color: var(--v2-blue); text-decoration: none; font-size: 7px; } .v2-access-inspector > section { border-top: 1px solid var(--v2-border); padding: 9px 11px; } .v2-access-inspector h3 { margin: 0 0 5px; font-size: 8px; } .v2-access-inspector section dl { margin: 0; } .v2-access-proof p { display: grid; grid-template-columns: 64px 1fr; gap: 8px; margin: 0; padding: 4px 0; color: #778599; font-size: 7px; line-height: 1.5; } .v2-access-proof p b { color: #4c596d; } .v2-access-side-empty { display: flex; min-height: 100px; align-items: center; justify-content: center; padding: 16px; color: var(--v2-muted); text-align: center; font-size: 8px; line-height: 1.6; } .v2-threshold-form { min-width: 0; margin: 0; border: 0; padding: 7px 11px 10px; } .v2-threshold-form:disabled { opacity: .82; } .v2-threshold-form label { position: relative; display: grid; min-height: 30px; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 7px; border-bottom: 1px solid #eef2f7; color: #657286; font-size: 7px; } .v2-threshold-form input, .v2-threshold-form select { min-width: 0; height: 24px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 22px 0 7px; color: #46546a; outline: 0; font-size: 7px; } .v2-threshold-form em { position: absolute; right: 7px; color: #96a1b1; font-size: 6px; font-style: normal; } .v2-threshold-form > button { display: inline-flex; width: 100%; height: 29px; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; border: 1px solid var(--v2-blue); border-radius: 6px; background: var(--v2-blue); color: #fff; cursor: pointer; font-size: 8px; font-weight: 700; } .v2-threshold-form > button:disabled { opacity: .5; } .v2-threshold-error { margin: 6px 0 0; color: var(--v2-red); font-size: 7px; line-height: 1.4; } .v2-access-threshold > footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--v2-border); padding: 8px 11px; color: #7f8c9f; font-size: 6px; } .v2-access-threshold > footer b { color: #536177; text-align: right; font-weight: 600; } /* Vehicle-first access matrix. Text deliberately starts at 11px instead of the legacy 7-9px scale. */ .v2-access-page-v3 { gap: 12px; overflow: auto; padding: 16px 18px 20px; background: #f6f8fb; } .v2-access-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; } .v2-access-heading h2 { margin: 0; color: #26354b; font-size: 22px; line-height: 1.25; letter-spacing: -.03em; } .v2-access-heading p { margin: 5px 0 0; color: #6f7d90; font-size: 13px; line-height: 1.5; } .v2-access-heading > div:last-child { display: flex; align-items: center; gap: 12px; color: #7b889a; font-size: 12px; } .v2-access-heading button, .v2-access-table-v3 > .semi-card-body > header button { display: inline-flex; height: 34px; align-items: center; gap: 6px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; padding: 0 12px; color: #536176; cursor: pointer; font-size: 12px; font-weight: 700; } .v2-access-heading button:hover, .v2-access-table-v3 > .semi-card-body > header button:hover { border-color: #9fc1f5; color: var(--v2-blue); } .v2-access-filter-card-v3.semi-card { flex: 0 0 auto; overflow: visible; border: 1px solid var(--v2-border); border-radius: 9px; box-shadow: var(--v2-shadow); } .v2-access-filter-v3 { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .7fr)) auto auto; align-items: end; gap: 10px; padding: 13px 14px; } .v2-access-filter-v3 label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #647287; font-size: 12px; font-weight: 650; } .v2-access-filter-v3 label > div { display: flex; height: 38px; align-items: center; gap: 8px; border: 1px solid #d9e2ed; border-radius: 7px; padding: 0 10px; color: #8997aa; } .v2-access-filter-v3 input, .v2-access-filter-v3 select { min-width: 0; width: 100%; height: 38px; border: 1px solid #d9e2ed; border-radius: 7px; background: #fff; padding: 0 10px; color: #35445b; outline: 0; font-size: 13px; } .v2-access-filter-v3 label > div input { height: auto; border: 0; padding: 0; } .v2-access-filter-v3 label > div:focus-within, .v2-access-filter-v3 select:focus { border-color: #83aff4; box-shadow: 0 0 0 3px rgba(18,104,243,.09); } .v2-access-filter-v3 > button { height: 38px; padding: 0 15px; font-size: 13px; } .v2-access-kpis-card-v3.semi-card { min-height: 56px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; box-shadow: var(--v2-shadow); } .v2-access-kpis-card-v3 > .semi-card-body { height: 100%; } .v2-access-kpis-v3 { display: grid; min-height: 56px; height: 100%; grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow: hidden; } .v2-access-kpis-v3 .v2-metric-action { position: relative; display: block; width: 100%; min-width: 0; height: auto; border: 0; border-radius: 0; background: #fff; padding: 10px 18px; text-align: left; cursor: pointer; } .v2-access-kpis-v3 .v2-metric-action + .v2-metric-action::before { position: absolute; inset: 10px auto 10px 0; width: 1px; background: #e6ebf2; content: ''; } .v2-access-kpis-v3 .v2-metric-action:hover { background: #f8fbff; } .v2-access-kpis-v3 .v2-metric-action.is-active { z-index: 1; background: #eef6ff; box-shadow: inset 0 -3px var(--v2-blue); } .v2-access-kpis-v3 .semi-button-content { display: block; width: 100%; min-width: 0; } .v2-access-kpis-v3 .v2-metric-action-content { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; } .v2-access-kpis-v3 small { color: #748195; font-size: 12px; } .v2-access-kpis-v3 strong { margin-left: auto; color: #29384e; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .v2-access-kpis-v3 em { color: #8995a6; font-size: 11px; font-style: normal; } .v2-access-kpis-v3 .is-healthy strong, .v2-access-kpis-v3 .is-today strong { color: var(--v2-green); } .v2-access-kpis-v3 .is-incomplete strong { color: #d47b12; } .v2-access-kpis-v3 .is-degraded strong { color: #bd6423; } .v2-access-kpis-v3 .is-attention strong { color: #d47b12; } .v2-access-kpis-v3 .is-offline strong, .v2-access-kpis-v3 .is-never strong { color: #5f6f83; } .v2-access-protocol-overview { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .v2-access-protocol-overview article { min-width: 0; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; padding: 13px 15px; box-shadow: var(--v2-shadow); } .v2-access-protocol-overview header, .v2-access-protocol-overview div, .v2-access-protocol-overview footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .v2-access-protocol-overview header strong { color: #33445a; font-size: 14px; }.v2-access-protocol-overview header span { color: #8995a6; font-size: 11px; } .v2-access-protocol-overview div { justify-content: flex-start; margin-top: 9px; }.v2-access-protocol-overview div b { color: #25364c; font-size: 24px; }.v2-access-protocol-overview div small { color: #708095; font-size: 12px; }.v2-access-protocol-overview div em { margin-left: auto; color: #c66a0a; font-size: 12px; font-style: normal; } .v2-access-protocol-overview footer { margin-top: 10px; }.v2-access-protocol-overview footer > i { height: 5px; flex: 1; overflow: hidden; border-radius: 5px; background: #edf1f6; }.v2-access-protocol-overview footer > i span { display: block; height: 100%; border-radius: inherit; background: #3787ee; }.v2-access-protocol-overview footer > span { color: #728095; font-size: 11px; white-space: nowrap; } .v2-access-workspace-v3 { display: grid; min-height: 540px; flex: 1 0 540px; grid-template-columns: minmax(0, 1fr); gap: 12px; } .v2-access-workspace-v3.is-inspector-open { grid-template-columns: minmax(760px, 1fr) 390px; } .v2-access-table-v3.semi-card { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; box-shadow: var(--v2-shadow); } .v2-access-table-v3 > .semi-card-body { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-access-table-v3 > .semi-card-body > header { display: flex; min-height: 52px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--v2-border); padding: 0 13px 0 15px; } .v2-access-table-title { display: flex; min-width: 0; align-items: baseline; gap: 10px; }.v2-access-table-title strong { color: #334258; font-size: 15px; white-space: nowrap; }.v2-access-table-title > span { overflow: hidden; color: #8692a3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-table-actions { display: flex; min-width: 0; align-items: center; gap: 9px; } .v2-access-protocol-coverage { display: flex; min-width: 0; align-items: center; gap: 6px; } .v2-access-protocol-coverage > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; padding: 5px 7px; white-space: nowrap; } .v2-access-protocol-coverage b { color: #526178; font-size: 10px; }.v2-access-protocol-coverage em { color: #7e8b9d; font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; } .v2-access-table-scroll-v3 { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-access-table-scroll-v3 table { width: 100%; min-width: 1030px; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #48576c; font-size: 13px; } .v2-access-table-scroll-v3 th { position: sticky; z-index: 2; top: 0; height: 40px; border-bottom: 1px solid #dfe5ed; background: #f7f9fc; color: #647287; text-align: left; font-size: 12px; font-weight: 700; } .v2-access-table-scroll-v3 th, .v2-access-table-scroll-v3 td { padding: 8px 11px; vertical-align: middle; } .v2-access-table-scroll-v3 th:nth-child(1) { width: 165px; }.v2-access-table-scroll-v3 th:nth-child(2) { width: 140px; }.v2-access-table-scroll-v3 th:nth-child(3) { width: 115px; }.v2-access-table-scroll-v3 th:nth-child(4), .v2-access-table-scroll-v3 th:nth-child(5), .v2-access-table-scroll-v3 th:nth-child(6) { width: 160px; }.v2-access-table-scroll-v3 th:nth-child(7) { width: 120px; } .v2-access-table-scroll-v3 tbody tr { cursor: pointer; transition: background .14s ease; }.v2-access-table-scroll-v3 tbody tr:hover, .v2-access-table-scroll-v3 tbody tr.is-selected { background: #f2f7ff; }.v2-access-table-scroll-v3 tbody td { height: 67px; border-bottom: 1px solid #edf1f5; } .v2-access-table-scroll-v3 td > strong, .v2-access-table-scroll-v3 td > b { display: block; overflow: hidden; color: #314158; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.v2-access-table-scroll-v3 td > span { display: block; overflow: hidden; margin-top: 5px; color: #8793a5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-protocol-cell { display: grid; min-width: 0; gap: 4px; }.v2-access-protocol-cell > span { display: inline-flex; width: fit-content; align-items: center; gap: 5px; color: #6c788b; font-size: 12px; }.v2-access-protocol-cell > span i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b5; }.v2-access-protocol-cell > strong { color: #3d4d63; font-size: 12px; font-weight: 650; }.v2-access-protocol-cell > small { overflow: hidden; color: #8b97a7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-protocol-cell.is-online > span { color: #16815f; }.v2-access-protocol-cell.is-online > span i { background: #19a974; box-shadow: 0 0 0 3px rgba(25,169,116,.11); }.v2-access-protocol-cell.is-offline > span { color: #b26512; }.v2-access-protocol-cell.is-offline > span i { background: #e6922e; }.v2-access-protocol-cell.is-missing > span { color: #8290a3; }.v2-access-protocol-cell.is-missing > span i { border: 1px solid #aeb8c5; background: #fff; } .v2-access-connection { display: grid; gap: 5px; }.v2-access-connection strong { width: fit-content; border-radius: 12px; background: #eef2f6; padding: 4px 8px; color: #607086; font-size: 11px; }.v2-access-connection span { color: #8793a5; font-size: 11px; }.v2-access-connection.is-healthy strong { background: #eaf8f2; color: #15815e; }.v2-access-connection.is-incomplete strong, .v2-access-connection.is-degraded strong { background: #fff4e5; color: #b5660c; }.v2-access-connection.is-not_connected strong { background: #fff0f0; color: #bc4d4d; } .v2-access-table-v3 > .semi-card-body > footer { display: flex; min-height: 46px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--v2-border); padding: 0 12px; color: #788699; font-size: 12px; }.v2-access-table-v3 > .semi-card-body > footer div { display: flex; align-items: center; gap: 7px; }.v2-access-table-v3 > .semi-card-body > footer button, .v2-access-table-v3 > .semi-card-body > footer select { height: 30px; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 9px; color: #5d6b80; font-size: 12px; } .v2-access-inspector-v3.semi-card { min-width: 0; overflow: auto; border: 1px solid var(--v2-border); border-radius: 9px; box-shadow: var(--v2-shadow); } .v2-access-inspector-summary { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--v2-border); padding: 10px 14px; }.v2-access-inspector-summary > div { min-width: 0; padding: 7px 4px; }.v2-access-inspector-summary span { display: block; color: #8793a5; font-size: 11px; }.v2-access-inspector-summary strong { display: block; margin-top: 5px; color: #3f4e63; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }.v2-access-inspector-summary .v2-access-connection { margin-top: 4px; } .v2-access-protocol-details { display: grid; gap: 9px; padding: 12px; }.v2-access-protocol-detail { overflow: hidden; border: 1px solid #e1e7ef; border-radius: 8px; }.v2-access-protocol-detail > header { display: flex; height: 38px; align-items: center; justify-content: space-between; background: #f8fafc; padding: 0 10px; }.v2-access-protocol-detail > header strong { color: #3b4a60; font-size: 13px; }.v2-access-protocol-detail > header span { display: inline-flex; align-items: center; gap: 5px; color: #69778b; font-size: 11px; }.v2-access-protocol-detail > header i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b5; }.v2-access-protocol-detail.is-online > header i { background: var(--v2-green); }.v2-access-protocol-detail.is-offline > header i { background: var(--v2-orange); }.v2-access-protocol-detail.is-missing { border-color: #e1e7ef; }.v2-access-protocol-detail.is-missing > header { background: #f8fafc; }.v2-access-protocol-detail.is-missing > header i { border: 1px solid #aeb8c5; background: #fff; } .v2-access-protocol-detail dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 7px 10px; }.v2-access-protocol-detail dl > div { min-width: 0; padding: 5px 3px; }.v2-access-protocol-detail dt { color: #8995a6; font-size: 11px; }.v2-access-protocol-detail dd { overflow: hidden; margin: 4px 0 0; color: #46556a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.v2-access-protocol-detail dd.is-danger { color: var(--v2-red); }.v2-access-protocol-detail p { margin: 0; border-top: 1px solid #edf1f5; padding: 7px 10px; color: #7c899b; font-size: 11px; line-height: 1.5; } .v2-access-inspector-v3 > .semi-card-body > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-top: 1px solid var(--v2-border); padding: 10px 14px; }.v2-access-inspector-v3 > .semi-card-body > footer span { color: #8591a2; font-size: 11px; line-height: 1.5; }.v2-access-inspector-v3 > .semi-card-body > footer a { flex: 0 0 auto; color: var(--v2-blue); font-size: 12px; text-decoration: none; } .v2-access-identity-queue-v3, .v2-access-settings { flex: 0 0 auto; border: 1px solid var(--v2-border); border-radius: 8px; background: #fff; }.v2-access-identity-queue-v3 summary, .v2-access-settings summary { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 0 12px; color: #5c6b80; cursor: pointer; font-size: 11px; }.v2-access-identity-queue-v3 summary span { color: #8995a6; font-size: 10px; }.v2-access-identity-queue-v3 > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--v2-border); padding: 10px; }.v2-access-identity-queue-v3 article { display: grid; gap: 4px; border: 1px solid #e4e9f0; border-radius: 7px; padding: 9px; }.v2-access-identity-queue-v3 article b { font-size: 11px; }.v2-access-identity-queue-v3 article span, .v2-access-identity-queue-v3 article small { color: #7d8a9c; font-size: 9px; line-height: 1.5; } .v2-access-settings fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 0; border: 0; border-top: 1px solid var(--v2-border); padding: 11px; }.v2-access-settings label { display: grid; gap: 5px; color: #718095; font-size: 10px; }.v2-access-settings input { width: 110px; height: 32px; border: 1px solid #dbe3ed; border-radius: 6px; padding: 0 8px; font-size: 11px; }.v2-access-settings button { display: inline-flex; height: 32px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: var(--v2-blue); padding: 0 11px; color: #fff; font-size: 10px; }.v2-access-settings p { width: 100%; margin: 0; color: var(--v2-red); font-size: 10px; } .v2-alert-page { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; background: #f5f7fa; padding: 0 12px 12px; } .v2-alert-heading { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; justify-content: space-between; background: #fff; margin: 0 -12px; padding: 0 16px; } .v2-alert-heading h2 { margin: 0; color: #26354b; font-size: 17px; letter-spacing: -.02em; } .v2-alert-heading p { display: inline; margin: 0 0 0 12px; color: var(--v2-muted); font-size: 8px; } .v2-alert-heading > div { display: flex; align-items: baseline; } .v2-alert-tabs { display: flex; min-height: 35px; flex: 0 0 auto; gap: 18px; border-bottom: 1px solid var(--v2-border); background: #fff; margin: 0 -12px 8px; padding: 0 16px; } .v2-alert-tabs button { position: relative; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0 4px; color: #68768a; cursor: pointer; font-size: 9px; font-weight: 600; } .v2-alert-tabs button.is-active { color: var(--v2-blue); } .v2-alert-tabs button.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--v2-blue); content: ''; } .v2-alert-tabs .v2-segmented-tab-count { min-width: 18px; min-height: 18px; background: var(--v2-red); color: #fff; font-size: 8px; } .v2-alert-filter-card.semi-card { flex: 0 0 auto; overflow: visible; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); } .v2-alert-filter { display: grid; grid-template-columns: minmax(180px,1.15fr) repeat(4,minmax(92px,.65fr)) repeat(2,minmax(135px,.8fr)) auto auto; align-items: end; gap: 6px; padding: 7px 9px; } .v2-alert-filter label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--v2-muted); font-size: 7px; } .v2-alert-filter label > div { display: flex; height: 30px; align-items: center; gap: 5px; border: 1px solid #dce4ef; border-radius: 5px; padding: 0 7px; color: #8996a8; } .v2-alert-filter input, .v2-alert-filter select { min-width: 0; height: 30px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #435168; outline: 0; font-size: 8px; } .v2-alert-filter label > div input { height: auto; flex: 1; border: 0; padding: 0; } .v2-alert-filter label > div:focus-within, .v2-alert-filter input:focus, .v2-alert-filter select:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-alert-filter button { height: 30px; padding: 0 10px; white-space: nowrap; font-size: 8px; } .v2-alert-kpis-card.semi-card { min-height: 62px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); margin-top: 8px; box-shadow: var(--v2-shadow); } .v2-alert-kpis-card > .semi-card-body { height: 100%; } .v2-alert-kpis { display: grid; min-height: 62px; height: 100%; grid-template-columns: repeat(7,minmax(74px,1fr)); overflow: hidden; } .v2-alert-kpis .v2-metric-action { position: relative; display: block; width: 100%; min-width: 0; height: auto; border: 0; border-radius: 0; background: #fff; padding: 0; cursor: pointer; } .v2-alert-kpis .v2-metric-action + .v2-metric-action::before { position: absolute; inset: 11px auto 11px 0; width: 1px; background: var(--v2-border); content: ''; } .v2-alert-kpis .v2-metric-action:hover, .v2-alert-kpis .is-unprocessed { background: #fff9f2; } .v2-alert-kpis .v2-metric-action.is-active { z-index: 1; background: #eef6ff; box-shadow: inset 0 -3px var(--v2-blue); } .v2-alert-kpis .v2-metric-action.is-unprocessed.is-active { background: #fff3e8; box-shadow: inset 0 -3px var(--v2-orange); } .v2-alert-kpis .semi-button-content { display: block; width: 100%; } .v2-alert-kpis .v2-metric-action-content { display: flex; min-height: 62px; align-items: center; justify-content: center; flex-direction: column; } .v2-alert-kpis small { color: var(--v2-muted); font-size: 8px; } .v2-alert-kpis strong { margin-top: 5px; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; } .v2-alert-kpis .is-unprocessed strong, .v2-alert-kpis button:first-child strong { color: var(--v2-red); } .v2-alert-kpis .is-processing strong { color: var(--v2-blue); }.v2-alert-kpis .is-recovered strong { color: var(--v2-green); }.v2-alert-kpis .is-notice strong { color: #7c3aed; } .v2-alert-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(700px,1fr) 320px; gap: 8px; margin-top: 8px; } .v2-alert-table-card.semi-card { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); } .v2-alert-table-card > .semi-card-body { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-alert-table-card > .semi-card-body > header { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 9px 0 11px; } .v2-alert-table-card > .semi-card-body > header strong { font-size: 9px; }.v2-alert-table-card > .semi-card-body > header div { display: flex; align-items: center; gap: 7px; }.v2-alert-table-card > .semi-card-body > header span { color: var(--v2-muted); font-size: 7px; } .v2-alert-table-card > .semi-card-body > header button { display: inline-flex; height: 25px; align-items: center; gap: 4px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #657286; cursor: pointer; font-size: 7px; } .v2-alert-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .v2-alert-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 7px; } .v2-alert-table-scroll th { position: sticky; z-index: 3; top: 0; height: 31px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; } .v2-alert-table-scroll th, .v2-alert-table-scroll td { max-width: 130px; border-right: 1px solid #eef2f7; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-table-scroll td { height: 34px; border-bottom: 1px solid #eef2f7; content-visibility: auto; font-variant-numeric: tabular-nums; cursor: pointer; } .v2-alert-table-scroll td strong, .v2-alert-table-scroll td small { display: block; }.v2-alert-table-scroll td small { margin-top: 2px; color: #8b97a8; font-size: 6px; } .v2-alert-table-scroll tr:hover td, .v2-alert-table-scroll tr.is-selected td { background: #f2f7ff; }.v2-alert-table-scroll tr.is-selected td:first-child { box-shadow: inset 2px 0 var(--v2-blue); } .v2-alert-table-scroll input { width: 12px; height: 12px; accent-color: var(--v2-blue); } .v2-alert-severity.semi-tag, .v2-alert-status.semi-tag { display: inline-flex; height: 22px; align-items: center; border-radius: 6px; padding-inline: 7px; font-size: 9px; font-weight: 650; white-space: nowrap; }.v2-alert-severity i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .v2-alert-loading, .v2-alert-empty { position: sticky; left: 0; display: flex; min-height: 70px; align-items: center; justify-content: center; gap: 6px; color: var(--v2-muted); font-size: 8px; }.v2-alert-loading { position: absolute; inset: 31px 0 auto; min-height: 32px; background: rgba(255,255,255,.88); }.v2-alert-loading i { width: 11px; height: 11px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } .v2-alert-table-card > .semi-card-body > footer { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-top: 1px solid var(--v2-border); padding: 0 9px; color: #657286; font-size: 7px; }.v2-alert-table-card > .semi-card-body > footer div { display: flex; gap: 5px; }.v2-alert-table-card > .semi-card-body > footer button, .v2-alert-table-card > .semi-card-body > footer select { height: 24px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 7px; color: #5f6e83; font-size: 7px; }.v2-alert-table-card > .semi-card-body > footer button:disabled { opacity: .35; } .v2-alert-inspector.semi-card { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); } .v2-alert-inspector > .semi-card-body > header { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 8px 11px; }.v2-alert-inspector > .semi-card-body > header > div { display: flex; min-width: 0; flex: 1; justify-content: space-between; flex-direction: column; gap: 6px; }.v2-alert-inspector > .semi-card-body > header strong { font-size: 12px; }.v2-alert-inspector > .semi-card-body > header span { display: flex; gap: 5px; font-size: 7px; } .v2-alert-inspector > .semi-card-body > section { border-bottom: 1px solid var(--v2-border); padding: 9px 11px; }.v2-alert-inspector h3 { margin: 0 0 6px; border-left: 2px solid var(--v2-blue); padding-left: 6px; font-size: 8px; }.v2-alert-inspector dl { margin: 0; }.v2-alert-inspector dl > div { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 7px; padding: 3px 0; font-size: 7px; }.v2-alert-inspector dt { color: #7f8c9f; }.v2-alert-inspector dd { margin: 0; overflow-wrap: anywhere; text-align: right; } .v2-alert-evidence { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 4px; }.v2-alert-evidence > div { display: flex; min-height: 57px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #e0e7f0; border-radius: 6px; background: #fafcff; text-align: center; }.v2-alert-evidence small { color: #7e8b9e; font-size: 7px; }.v2-alert-evidence strong { margin-top: 6px; color: #39475c; font-size: 11px; }.v2-alert-evidence > div:first-child strong { color: var(--v2-red); }.v2-alert-evidence > b { color: #7e8b9e; text-align: center; font-size: 8px; } .v2-alert-timeline { padding-left: 3px; }.v2-alert-timeline article { position: relative; display: grid; min-height: 35px; grid-template-columns: 12px 1fr; gap: 7px; }.v2-alert-timeline article:not(:last-child)::before { position: absolute; top: 10px; bottom: -3px; left: 3px; width: 1px; background: #cdd7e4; content: ''; }.v2-alert-timeline i { position: relative; z-index: 1; width: 7px; height: 7px; margin-top: 3px; border: 2px solid var(--v2-blue); border-radius: 50%; background: #fff; }.v2-alert-timeline article:first-child i { border-color: var(--v2-red); }.v2-alert-timeline strong { display: block; font-size: 7px; }.v2-alert-timeline span { display: block; margin-top: 3px; color: #8793a5; font-size: 6px; }.v2-alert-timeline p { margin: 3px 0 0; color: #68768a; font-size: 6px; } .v2-alert-inspector textarea { width: 100%; height: 46px; resize: vertical; border: 1px solid #dce4ef; border-radius: 5px; padding: 6px; color: #46546a; outline: 0; font: inherit; font-size: 7px; }.v2-alert-note-count { display: block; margin-top: -13px; padding-right: 5px; color: #9aa5b4; text-align: right; font-size: 6px; }.v2-alert-action-error { margin: 6px 0 0; color: var(--v2-red); font-size: 7px; } .v2-alert-actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 5px; margin-top: 8px; }.v2-alert-actions button { height: 28px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; color: #526176; cursor: pointer; font-size: 7px; }.v2-alert-actions button.is-primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-alert-actions button:disabled { opacity: .35; cursor: not-allowed; } .v2-alert-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 8px 11px; }.v2-alert-links a { display: flex; height: 26px; align-items: center; justify-content: center; color: var(--v2-blue); text-decoration: none; font-size: 7px; } .v2-alert-side-empty { display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 20px; color: #8290a3; text-align: center; }.v2-alert-side-empty strong { color: #4b596d; font-size: 11px; }.v2-alert-side-empty span { font-size: 8px; } .v2-alert-rules { display: grid; min-height: 0; flex: 1; grid-template-columns: 330px minmax(560px,1fr); gap: 8px; }.v2-alert-rule-list, .v2-alert-rule-editor, .v2-alert-notifications { min-height: 0; overflow: auto; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-alert-rule-list > header, .v2-alert-rule-editor > header { display: flex; min-height: 45px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; }.v2-alert-rule-list > header strong, .v2-alert-rule-editor > header strong { font-size: 11px; }.v2-alert-rule-list > header button, .v2-alert-rule-editor > header button { height: 27px; border: 1px solid #dce4ef; border-radius: 5px; background: #fff; padding: 0 8px; color: var(--v2-blue); cursor: pointer; font-size: 8px; } .v2-alert-rule-list > button { display: grid; width: 100%; min-height: 58px; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #eef2f7; background: #fff; padding: 8px 11px; text-align: left; cursor: pointer; }.v2-alert-rule-list > button.is-selected { background: #f2f7ff; box-shadow: inset 2px 0 var(--v2-blue); }.v2-alert-rule-list > button > i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }.v2-alert-rule-list > button > i.is-critical { background: var(--v2-red); }.v2-alert-rule-list > button > i.is-major { background: var(--v2-orange); }.v2-alert-rule-list > button span { min-width: 0; }.v2-alert-rule-list > button strong, .v2-alert-rule-list > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-alert-rule-list > button strong { font-size: 9px; }.v2-alert-rule-list > button small { margin-top: 5px; color: #8390a2; font-size: 7px; }.v2-alert-rule-list em { color: #94a3b8; font-size: 7px; font-style: normal; }.v2-alert-rule-list em.is-enabled { color: var(--v2-green); } .v2-alert-rule-editor > header div { display: flex; flex-direction: column; gap: 3px; }.v2-alert-rule-editor > header span { color: var(--v2-muted); font-size: 7px; }.v2-rule-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 15px; }.v2-rule-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #68768a; font-size: 8px; }.v2-rule-form-grid label.is-wide { grid-column: 1/-1; }.v2-rule-form-grid input, .v2-rule-form-grid select, .v2-rule-form-grid textarea { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; padding: 0 9px; color: #435168; outline: 0; font: inherit; font-size: 9px; }.v2-rule-form-grid textarea { height: 60px; padding: 8px; resize: vertical; }.v2-alert-rule-editor > footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--v2-border); padding: 10px 15px; }.v2-alert-rule-editor > footer > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }.v2-alert-rule-editor > footer b { font-size: 8px; }.v2-alert-rule-editor > footer span { color: var(--v2-muted); font-size: 7px; }.v2-alert-rule-editor > footer em { color: var(--v2-red); font-size: 7px; font-style: normal; }.v2-alert-rule-editor > footer button { height: 32px; } .v2-alert-rule-templates { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--v2-border); background: linear-gradient(135deg,#f8fbff,#f5f8fc); padding: 12px 15px; }.v2-alert-rule-templates > div { display: flex; flex-direction: column; gap: 4px; }.v2-alert-rule-templates > div strong { color: #314158; font-size: 10px; }.v2-alert-rule-templates > div span { color: var(--v2-muted); font-size: 7px; line-height: 1.5; }.v2-alert-rule-templates nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.v2-alert-rule-templates button { display: flex; min-width: 0; min-height: 50px; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid #d9e4f3; border-radius: 8px; background: rgba(255,255,255,.92); padding: 8px 11px; color: #3e4d63; text-align: left; cursor: pointer; }.v2-alert-rule-templates button:hover { border-color: #9dbdf0; box-shadow: 0 4px 12px rgba(37,99,235,.08); }.v2-alert-rule-templates button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }.v2-alert-rule-templates button b { font-size: 9px; }.v2-alert-rule-templates button small { overflow: hidden; color: #7d899b; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-notifications { flex: 1; }.v2-alert-notifications > div { min-height: 0; max-height: calc(100% - 125px); overflow: auto; }.v2-alert-notifications article { display: grid; min-height: 64px; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #eef2f7; padding: 9px 13px; }.v2-alert-notifications article.is-read { opacity: .58; }.v2-alert-notifications article > i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }.v2-alert-notifications article > i.is-critical { background: var(--v2-red); }.v2-alert-notifications article > i.is-major { background: var(--v2-orange); }.v2-alert-notifications article strong { font-size: 9px; }.v2-alert-notifications article p { margin: 4px 0; color: #68768a; font-size: 8px; }.v2-alert-notifications article span { color: #94a3b8; font-size: 7px; }.v2-alert-notifications article button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 8px; }.v2-alert-notifications > footer { display: flex; gap: 16px; border-top: 1px solid var(--v2-border); padding: 12px 13px; color: #7f8c9f; font-size: 7px; }.v2-alert-notifications > footer b { color: #4f5d72; } @keyframes v2-spin { to { transform: rotate(360deg); } } @keyframes v2-map-ripple { 0% { opacity: .8; transform: scale(.35); } 80%, 100% { opacity: 0; transform: scale(1.25); } } @keyframes v2-panel-enter { from { opacity: .72; transform: translate3d(8px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (min-width: 1600px) and (min-height: 900px) { .v2-filterbar > .semi-card-body { gap: 12px; padding: 11px 14px; } .v2-search-field, .v2-filterbar select, .v2-primary-button, .v2-secondary-button { height: 40px; } .v2-kpi { min-height: 70px; padding: 12px 17px; } .v2-kpi small { font-size: 11px; } .v2-kpi strong { margin-top: 7px; font-size: clamp(20px, 1.2vw, 27px); } .v2-vehicle-rail > header { height: 50px; padding: 0 14px; } .v2-rail-search { height: 36px; margin: 0 11px 9px; } .v2-vehicle-row { min-height: 66px; padding: 9px 12px; } .v2-vehicle-identity strong { font-size: 13px; } .v2-vehicle-detail { padding: 16px; } .v2-detail-title strong { font-size: 17px; } .v2-detail-actions a { height: 32px; font-size: 9px; } .v2-vehicle-detail h3 { font-size: 12px; } .v2-detail-list > div { grid-template-columns: 84px minmax(0, 1fr); padding: 6px 0; font-size: 10px; } .v2-metric-grid > div { padding: 11px; } .v2-metric-grid small { font-size: 9px; } .v2-metric-grid strong { font-size: 17px; } .v2-event-strip { min-height: 52px; font-size: 10px; } .v2-event-strip > .semi-card-body { min-height: 50px; } } @media (min-width: 2200px) and (min-height: 1200px) { .v2-monitor-page { gap: 14px; padding: 18px 22px 20px; } .v2-filterbar > .semi-card-body { padding: 13px 16px; } .v2-search-field, .v2-filterbar select, .v2-primary-button, .v2-secondary-button { height: 42px; font-size: 13px; } .v2-kpi { min-height: 82px; padding: 15px 20px; } .v2-kpi small { font-size: 12px; } .v2-kpi strong { font-size: 28px; } .v2-vehicle-rail > header { height: 54px; } .v2-vehicle-rail > header strong { font-size: 14px; } .v2-rail-search { height: 38px; font-size: 11px; } .v2-vehicle-row { min-height: 72px; } .v2-vehicle-identity strong { font-size: 14px; } .v2-vehicle-motion strong { font-size: 12px; } .v2-map-controls { top: 16px; right: 16px; } .v2-map-layer-control, .v2-map-follow-control { height: 48px; padding: 0 12px; } .v2-map-layer-control strong { font-size: 11px; } .v2-map-layer-control small { font-size: 9px; } .v2-map-follow-control strong { font-size: 11px; } .v2-map-follow-control small { font-size: 9px; } .v2-map-legend { bottom: 16px; height: 40px; gap: 22px; padding: 0 20px; font-size: 10px; } .v2-vehicle-detail { padding: 19px; } .v2-detail-title strong { font-size: 19px; } .v2-detail-list > div { grid-template-columns: 92px minmax(0, 1fr); font-size: 11px; } .v2-vehicle-detail h3 { font-size: 13px; } .v2-metric-grid small { font-size: 10px; } .v2-metric-grid strong { font-size: 19px; } .v2-event-strip { min-height: 56px; font-size: 11px; } .v2-event-strip > .semi-card-body { min-height: 54px; padding: 0 20px; } } @media (max-width: 1180px) { .v2-monitor-workspace { grid-template-columns: 220px minmax(420px, 1fr); } .v2-monitor-workspace.is-detail-open { grid-template-columns: 220px minmax(420px, 1fr) 280px; } .v2-monitor-workspace.is-detail-collapsed { grid-template-columns: 220px minmax(420px, 1fr) 42px; } .v2-kpis > .semi-card-body { grid-template-columns: repeat(4, 1fr); } .v2-kpi:nth-child(5)::before { display: none; } .v2-identity-band { grid-template-columns: minmax(240px, 1fr) minmax(300px, 1fr); } .v2-identity-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--v2-border); } .v2-record-grid { grid-template-columns: minmax(460px, 1.5fr) minmax(280px, 1fr); } .v2-live-overview .v2-live-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .v2-live-overview .v2-live-grid > div:nth-child(4) { border-left: 0; } .v2-live-overview .v2-live-grid > div:nth-child(n+4) { border-top: 1px solid var(--v2-border); } .v2-current-location { grid-template-columns: minmax(260px,.8fr) minmax(320px,1.2fr); } .v2-history-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.5fr) repeat(3, minmax(100px, .7fr)); } .v2-history-toolbar button { min-width: 90px; } .v2-history-workspace { grid-template-columns: minmax(600px, 1fr) 280px; } .v2-access-filter { grid-template-columns: minmax(210px, 1fr) repeat(4, minmax(110px, .7fr)); } .v2-access-filter button { min-width: 86px; } .v2-access-advanced > div { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .v2-access-workspace { grid-template-columns: minmax(620px, 1fr) 280px; } .v2-access-identity-queue > div { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .v2-alert-filter { grid-template-columns: minmax(180px,1fr) repeat(4,minmax(88px,.65fr)); } .v2-alert-filter label:nth-of-type(6), .v2-alert-filter label:nth-of-type(7) { display: none; } .v2-alert-workspace { grid-template-columns: minmax(620px,1fr) 290px; } } @media (max-width: 900px) { .v2-sidebar { width: 68px; } .v2-main { margin-left: 68px; } .v2-nav-label, .v2-collapse span { display: none; } .v2-brand { justify-content: center; padding: 0; } .v2-brand-logo { display: none; } .v2-brand-symbol { display: block; } .v2-nav-item { justify-content: center; padding: 0; } .v2-filterbar > .semi-card-body { grid-template-columns: 1fr 1fr; } .v2-search-field { grid-column: 1 / -1; } .v2-monitor-workspace, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); } .v2-monitor-workspace.is-detail-open { position: relative; grid-template-columns: minmax(0, 1fr); } .v2-monitor-workspace.is-detail-open > .v2-vehicle-rail { display: none; } .v2-monitor-workspace.is-detail-open .v2-map-controls { right: auto; left: 12px; } .v2-monitor-workspace.is-detail-open .v2-map-legend { right: 370px; left: 12px; width: auto; max-width: none; transform: none; } .v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(350px, calc(100% - 20px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); } .v2-detail-peek { position: absolute; right: 10px; bottom: 10px; z-index: 8; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.16); } .v2-detail-peek .semi-button { width: auto; height: 44px; border-radius: 22px; padding: 0 14px; } .v2-detail-peek .semi-button-content { flex-direction: row; gap: 7px; } .v2-detail-peek .semi-button-content > span { max-width: 130px; writing-mode: horizontal-tb; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } .v2-identity-band { grid-template-columns: 1fr; } .v2-identity-meta { border: 0; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); } .v2-identity-actions { grid-column: auto; justify-content: stretch; border: 0; } .v2-identity-actions a { flex: 1; justify-content: center; } .v2-record-grid { display: flex; flex-direction: column; } .v2-live-overview .v2-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-live-overview .v2-live-grid > div:nth-child(odd) { border-left: 0; } .v2-live-overview .v2-live-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); } .v2-current-location { grid-template-columns: 1fr; } .v2-current-location > span + span { border-top: 1px solid var(--v2-border); border-left: 0; } .v2-single-map-card { min-height: 360px; } .v2-archive-card, .v2-live-card, .v2-telemetry-card, .v2-events-card { grid-area: auto; } .v2-history-page { height: auto; min-height: 100%; overflow: auto; } .v2-history-toolbar { grid-template-columns: 1fr 1fr; } .v2-history-vehicles { grid-column: 1 / -1; } .v2-history-range { grid-column: 1 / -1; } .v2-history-workspace { display: flex; flex-direction: column; } .v2-history-main { height: 760px; min-height: 0; flex: none; grid-template-rows: 58px 220px minmax(0, 1fr); } .v2-history-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; } .v2-history-side > .semi-card + .semi-card { margin-top: 0; } .v2-access-page { height: auto; min-height: 100%; overflow: auto; } .v2-access-filter { grid-template-columns: 1fr 1fr; } .v2-access-filter label:first-child { grid-column: 1 / -1; } .v2-access-advanced > div { grid-template-columns: 1fr 1fr; } .v2-access-kpis { grid-template-columns: repeat(3, 1fr); } .v2-access-kpis button:nth-child(4)::before { display: none; } .v2-access-workspace { display: flex; flex-direction: column; } .v2-access-identity-queue > div { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .v2-access-table-card { height: 620px; flex: none; } .v2-access-side { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; overflow: visible; } .v2-access-side > section + section { margin-top: 0; } .v2-alert-page { height: auto; min-height: 100%; overflow: auto; } .v2-alert-filter { grid-template-columns: repeat(3,1fr); } .v2-alert-filter label:first-child { grid-column: 1/-1; } .v2-alert-kpis { grid-template-columns: repeat(4,1fr); } .v2-alert-kpis button:nth-child(5)::before { display: none; } .v2-alert-workspace { display: flex; flex-direction: column; } .v2-alert-table-card { height: 610px; flex: none; } .v2-alert-inspector { max-height: none; overflow: visible; } .v2-alert-rules { display: flex; flex-direction: column; } .v2-alert-rule-list { max-height: 300px; flex: none; } .v2-ops-kpis { grid-template-columns: repeat(3,1fr); }.v2-ops-grid { grid-template-columns: 1fr; }.v2-ops-sources > .semi-card-body > div { grid-template-columns: 1fr; }.v2-ops-sources article + article { border-top: 1px solid var(--v2-border); border-left: 0; } .v2-reconcile-kpis { grid-template-columns: repeat(3,1fr); }.v2-reconcile-layout { grid-template-columns: minmax(0,1fr) 220px; }.v2-reconcile-toolbar { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(120px,auto)); }.v2-reconcile-toolbar select:last-child { grid-column: span 2; } .v2-source-summary { grid-template-columns: repeat(2,1fr); }.v2-source-summary article:nth-child(3) { border-left: 0; }.v2-source-summary article:nth-child(n+3) { border-top: 1px solid #e7edf4; } } .v2-mileage-page { display: flex; min-height: 100%; flex-direction: column; gap: 12px; padding: 18px 20px 20px; } .v2-mileage-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .v2-mileage-heading h2 { margin: 0; color: #172033; font-size: 24px; font-weight: 720; letter-spacing: -.04em; } .v2-mileage-heading p { margin: 6px 0 0; color: #748196; font-size: 12px; line-height: 1.5; } .v2-mileage-heading > button { display: flex; height: 36px; align-items: center; gap: 7px; border: 1px solid #d8e0eb; border-radius: 8px; background: #fff; padding: 0 13px; color: #56657a; cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .16s ease, color .16s ease, background .16s ease; } .v2-mileage-heading > button:hover { border-color: #aebed3; background: #f8fafc; color: #1f4e8c; } .v2-mileage-query-panel.semi-card { overflow: visible; border: 1px solid #d9e2ed; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(24,39,62,.055); } .v2-mileage-filter { display: grid; grid-template-columns: minmax(320px,1.5fr) minmax(132px,.55fr) minmax(132px,.55fr) auto auto auto; align-items: start; gap: 12px; padding: 16px 18px 15px; } .v2-mileage-filter > label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #4f5f75; font-size: 11px; font-weight: 650; } .v2-mileage-filter > label > input { width: 100%; height: 40px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 0 11px; color: #253248; outline: 0; font-family: inherit; font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease; } .v2-mileage-filter > label > input:focus, .v2-mileage-multiselect:focus-within { border-color: #6d9ff1; box-shadow: 0 0 0 3px rgba(37,99,235,.08); } .v2-mileage-filter > .v2-primary-button { height: 40px; margin-top: 18px; border-radius: 7px; padding: 0 22px; box-shadow: 0 4px 10px rgba(37,99,235,.16); font-size: 12px; } .v2-mileage-validation { margin: -5px 20px 14px; border: 1px solid #f1c5c8; border-radius: 7px; background: #fff7f7; padding: 9px 11px; color: #b54046; font-size: 11px; line-height: 1.5; } .v2-mileage-vehicle-field { position: relative; } .v2-mileage-vehicle-field > small { color: #96a1b0; font-size: 9px; font-weight: 400; } .v2-mileage-multiselect { position: relative; display: flex; min-height: 40px; align-items: flex-start; gap: 8px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 6px 10px; color: #8a98aa; transition: border-color .16s ease, box-shadow .16s ease; } .v2-mileage-multiselect > svg { flex: 0 0 auto; margin-top: 5px; } .v2-mileage-selection { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 4px; } .v2-mileage-selection > input { width: 120px; min-width: 90px; height: 26px; flex: 1; border: 0; background: transparent; padding: 0 3px; color: var(--v2-text); outline: 0; font-family: inherit; font-size: 12px; } .v2-mileage-chip.semi-tag { display: inline-flex; max-width: 150px; height: 26px; align-items: center; border: 1px solid #c8daf6; border-radius: 5px; background: #eff5ff; padding: 0 5px 0 8px; color: #245da8; font-size: 10px; } .v2-mileage-chip .semi-tag-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-chip .semi-tag-close { flex: 0 0 auto; margin-left: 4px; font-size: 9px; } .v2-mileage-options { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; overflow: hidden; border: 1px solid #d8e1ed; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(35,53,78,.16); } .v2-mileage-options > header { display: flex; height: 34px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; padding: 0 11px; color: #77859a; font-size: 9px; } .v2-mileage-options > header em { font-style: normal; } .v2-mileage-options > button { display: grid; width: 100%; min-height: 42px; grid-template-columns: minmax(90px,.55fr) minmax(150px,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #f0f3f7; background: #fff; padding: 7px 11px; color: var(--v2-text); cursor: pointer; text-align: left; } .v2-mileage-options > button:hover { background: #f6f9fd; } .v2-mileage-options > button:disabled { color: #8491a3; cursor: default; } .v2-mileage-options > button strong { font-size: 11px; } .v2-mileage-options > button span { overflow: hidden; color: #7d899a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; } .v2-mileage-options > button em { color: var(--v2-blue); font-size: 9px; font-style: normal; } .v2-mileage-options > p { margin: 0; padding: 16px; color: var(--v2-muted); text-align: center; font-size: 10px; } .v2-vehicle-option-error { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 10px; background: #fff8f8; padding: 9px 11px; color: #b44848; font-size: 10px; line-height: 1.45; } .v2-vehicle-option-error > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-option-error > .semi-button { height: 28px; flex: 0 0 auto; border: 1px solid #efc3c3; border-radius: 6px; background: #fff; padding: 0 10px; color: #ad4141; font-size: 10px; font-weight: 700; } .v2-mileage-source-strategy { position: relative; align-self: start; margin-top: 18px; } .v2-mileage-source-trigger { display: flex; height: 40px; align-items: center; gap: 6px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; padding: 0 11px; color: #56657a; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; transition: border-color .16s ease, background .16s ease; } .v2-mileage-source-trigger:hover, .v2-mileage-source-trigger[aria-expanded="true"] { border-color: #a8bad2; background: #f8fafc; } .v2-mileage-source-trigger b { display: grid; min-width: 28px; height: 20px; place-items: center; border-radius: 10px; background: #eef4fd; color: #3167ad; font-size: 9px; } .v2-mileage-source-list article { display: grid; min-height: 62px; grid-template-columns: auto minmax(130px,1fr) 72px auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf1f5; padding: 8px 13px 8px 16px; } .v2-mileage-source-list article.is-disabled { background: #fafbfc; } .v2-mileage-source-switch { position: relative; width: 32px; height: 18px; border: 0; border-radius: 9px; background: #c9d1dc; padding: 0; cursor: pointer; transition: background .16s ease; } .v2-mileage-source-switch i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.2); transition: transform .16s ease; } .v2-mileage-source-switch.is-on { background: var(--v2-blue); } .v2-mileage-source-switch.is-on i { transform: translateX(14px); } .v2-mileage-source-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-mileage-source-list article > div strong { color: #344257; font-size: 11px; } .v2-mileage-source-list article > div small { display: flex; min-width: 0; align-items: center; gap: 7px; color: #8a96a7; font-size: 8px; } .v2-mileage-source-list article > div small b { color: #55708f; font-size: 9px; font-weight: 650; } .v2-mileage-source-list article > div code { overflow: hidden; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-source-list article > em { color: #5f7190; font-size: 9px; font-style: normal; text-align: right; white-space: nowrap; } .v2-mileage-source-list article.is-disabled > div, .v2-mileage-source-list article.is-disabled > em { opacity: .58; } .v2-mileage-source-list article > p { display: flex; gap: 3px; margin: 0; } .v2-mileage-source-list article > p button { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; color: #65758b; cursor: pointer; } .v2-mileage-source-list article > p button:disabled { opacity: .32; cursor: default; } .v2-mileage-ranges { display: flex; align-items: center; align-self: end; gap: 3px; margin-bottom: 1px; border-radius: 8px; background: #f3f6fa; padding: 2px; } .v2-mileage-ranges > span { display: none; } .v2-mileage-ranges button { height: 34px; border: 0; border-radius: 6px; background: transparent; padding: 0 9px; color: #64748b; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; transition: color .16s ease, background .16s ease, box-shadow .16s ease; } .v2-mileage-ranges button:hover { background: #f1f5fb; color: var(--v2-blue); } .v2-mileage-ranges button.is-active { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 4px rgba(20,44,78,.12); } .v2-mileage-summary { display: grid; grid-template-columns: minmax(330px,.9fr) minmax(0,1.55fr); border-top: 1px solid #e3e9f1; background: #f7f9fc; } .v2-mileage-summary-card.semi-card { min-width: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; } .v2-mileage-summary small, .v2-mileage-summary span { display: block; overflow: hidden; color: #7c899b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-summary strong { display: block; margin: 7px 0 4px; overflow: hidden; color: #172033; font-size: clamp(20px,1.6vw,26px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-summary > .is-primary > .semi-card-body { position: relative; overflow: hidden; min-height: 92px; background: #1268f3; padding: 18px 24px 20px !important; color: #fff; } .v2-mileage-summary > .is-primary small, .v2-mileage-summary > .is-primary span { position: relative; z-index: 1; color: rgba(255,255,255,.76); } .v2-mileage-summary > .is-primary strong { position: relative; z-index: 1; color: #fff; font-size: clamp(27px,2.15vw,36px); } .v2-mileage-summary-secondary { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); background: #fff; } .v2-mileage-summary-secondary .v2-mileage-summary-card > .semi-card-body { position: relative; display: flex; min-width: 0; min-height: 92px; justify-content: center; flex-direction: column; padding: 17px 20px 18px !important; } .v2-mileage-summary-secondary .v2-mileage-summary-card + .v2-mileage-summary-card > .semi-card-body::before { position: absolute; inset: 17px auto 17px 0; width: 1px; background: #e0e6ee; content: ""; } .v2-mileage-results.semi-card { min-height: 430px; flex: 1; overflow: hidden; border: 1px solid #d9e2ed; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(24,39,62,.05); } .v2-mileage-results > .semi-card-body { display: flex; min-height: 430px; height: 100%; flex-direction: column; } .v2-mileage-results > .semi-card-body > header, .v2-mileage-results > .semi-card-body > footer { display: flex; min-height: 54px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; } .v2-mileage-results > .semi-card-body > header { border-bottom: 1px solid #e4e9f0; } .v2-mileage-results > .semi-card-body > header div { display: flex; align-items: baseline; gap: 10px; } .v2-mileage-results > .semi-card-body > header strong { color: #17253a; font-size: 15px; } .v2-mileage-results > .semi-card-body > header span, .v2-mileage-results > .semi-card-body > header em, .v2-mileage-results > .semi-card-body > footer { color: #7c899b; font-size: 10px; font-style: normal; } .v2-mileage-results > .semi-card-body > header .v2-mileage-result-actions { align-items: center; gap: 12px; } .v2-mileage-result-actions > button { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #cbd8e8; border-radius: 7px; background: #fff; padding: 0 11px; color: #315f9f; cursor: pointer; font-size: 10px; font-weight: 650; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .v2-mileage-result-actions > button:hover { border-color: #99b6dd; background: #f5f9ff; box-shadow: 0 2px 7px rgba(37,99,235,.08); } .v2-mileage-result-actions > button.is-refresh { border-color: transparent; background: #f2f5f9; color: #5f6f84; box-shadow: none; } .v2-mileage-result-actions > button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .v2-mileage-export-progress { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; border-bottom: 1px solid #e4e9f0; background: #f7faff; padding: 9px 18px; } .v2-mileage-export-progress > span { display: flex; min-width: 190px; align-items: center; justify-content: space-between; gap: 12px; color: #315f9f; font-size: 10px; } .v2-mileage-export-progress > span strong { font-weight: 650; }.v2-mileage-export-progress > span small { color: #6f8198; font-variant-numeric: tabular-nums; } .v2-mileage-export-progress > i { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 999px; background: #dce8f8; } .v2-mileage-export-progress > i b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--v2-blue); transition: width .18s ease; } .v2-mileage-export-progress > i.is-indeterminate b { width: 38%; animation: v2-export-progress 1.1s ease-in-out infinite; } @keyframes v2-export-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } } .v2-mileage-table-wrap { min-height: 0; flex: 1; overflow: auto; } .v2-mileage-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } .v2-mileage-table th { position: sticky; z-index: 2; top: 0; height: 46px; border-bottom: 1px solid #dfe6ef; background: #f5f8fc; padding: 0 14px; color: #526279; font-size: 11px; font-weight: 700; text-align: left; white-space: nowrap; } .v2-mileage-table td { height: 56px; border-bottom: 1px solid #e8edf3; padding: 0 14px; color: #46556a; white-space: nowrap; } .v2-mileage-table tbody tr:hover { background: #f8fbff; } .v2-mileage-table td strong { color: #263448; } .v2-mileage-table code { color: #69778b; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; } .v2-mileage-table .is-number { text-align: right; font-variant-numeric: tabular-nums; } .v2-mileage-table .is-date { min-width: 96px; text-align: center; } .v2-mileage-table .is-sticky { position: sticky; z-index: 3; background: #fff; } .v2-mileage-table th.is-sticky { z-index: 5; background: #f7f9fc; } .v2-mileage-table .is-plate { left: 0; width: 120px; min-width: 120px; } .v2-mileage-table .is-vin { left: 120px; width: 182px; min-width: 182px; border-right: 1px solid #d8e0ea; box-shadow: 5px 0 10px rgba(15,23,42,.025); } .v2-mileage-table .is-total { position: sticky; z-index: 3; right: 0; min-width: 128px; border-left: 1px solid #d8e0ea; background: #fbfdff; box-shadow: -5px 0 10px rgba(15,23,42,.025); } .v2-mileage-table th.is-total { z-index: 5; background: #f1f6fe; color: #315f9f; } .v2-mileage-table .is-daily { color: #28496f; font-size: 11px; font-weight: 650; } .v2-mileage-table .is-empty { color: #b2bcc9; text-align: center; } .v2-mileage-table .is-period { color: #135fcb; font-size: 12px; font-weight: 800; } .v2-mileage-source { display: inline-flex; height: 22px; align-items: center; border: 1px solid #dbe4ef; border-radius: 4px; background: #f8fafc; padding: 0 7px; color: #66758a; font-size: 8px; } .v2-mileage-results > .semi-card-body > footer { border-top: 1px solid var(--v2-border); background: #fbfcfe; } .v2-mileage-results > .semi-card-body > footer div { display: flex; gap: 6px; } .v2-mileage-results > .semi-card-body > footer button { height: 29px; border: 1px solid #d7e0eb; border-radius: 6px; background: #fff; padding: 0 12px; color: #50627a; cursor: pointer; font-size: 9px; font-weight: 600; } .v2-mileage-results > .semi-card-body > footer button:hover:not(:disabled) { border-color: #a9bdd7; background: #f5f8fc; color: #315f9f; } .v2-mileage-results > .semi-card-body > footer button:disabled { opacity: .45; cursor: not-allowed; } .v2-mileage-mobile-list { display: none; } .v2-mileage-loading { display: flex; min-height: 210px; flex: 1; align-items: center; justify-content: center; gap: 10px; color: #52637a; } .v2-mileage-loading > div { display: flex; flex-direction: column; gap: 3px; } .v2-mileage-loading strong { color: #2c3d54; font-size: 12px; } .v2-mileage-loading small { color: #8491a3; font-size: 9px; } .v2-mileage-empty { display: grid; min-height: 210px; flex: 1; place-items: center; color: #8290a3; font-size: 12px; } .v2-mileage-evidence { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--v2-muted); font-size: 9px; } @media (max-width: 1050px) { .v2-mileage-filter { grid-template-columns: repeat(2,minmax(0,1fr)) auto auto; } .v2-mileage-vehicle-field { grid-column: 1 / -1; } .v2-mileage-filter > .v2-primary-button { width: auto; margin-top: 18px; } .v2-mileage-ranges { grid-column: 1 / -1; } } @media (max-width: 680px) { html, body, #root { min-width: 320px; min-height: 100%; } body { overscroll-behavior-y: none; } .v2-auth-screen { min-height: 100dvh; padding: 16px; } .v2-auth-card { padding: 26px 20px; } .v2-auth-card input { height: 46px; font-size: 16px; } .v2-auth-card button { height: 46px; } .v2-sidebar { inset: auto 0 0 0; width: auto; height: calc(64px + env(safe-area-inset-bottom)); flex-direction: row; border: 0; border-top: 1px solid var(--v2-border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(21,32,51,.07); } .v2-brand, .v2-collapse, .v2-nav-operations { display: none; } .v2-navigation { display: grid; width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 4px 3px; } .v2-nav-item { height: 56px; justify-content: center; flex-direction: column; gap: 2px; padding: 3px 0 2px; border-radius: 8px; font-weight: 600; } .v2-nav-item > svg { flex: 0 0 auto; font-size: 18px; } .v2-nav-label, .v2-sidebar.is-collapsed .v2-nav-label { display: block; max-width: 100%; overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; } .v2-nav-item.is-active::before { inset: auto auto 0; width: 20px; height: 2px; } .v2-main, .v2-sidebar.is-collapsed + .v2-main { margin-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .v2-topbar { height: 52px; flex: 0 0 52px; padding: 0 10px 0 14px; } .v2-topbar h1 { font-size: 17px; } .v2-topbar-actions { gap: 0; } .v2-topbar-actions button { width: 40px; height: 40px; } .v2-help-panel { top: 48px; right: 7px; padding: 16px; } .v2-current-user { display: none; } .v2-content { overscroll-behavior: contain; } .v2-monitor-page { height: auto; min-height: 100%; gap: 8px; overflow: visible; padding: 8px; } .v2-filterbar.semi-card { box-shadow: 0 4px 16px rgba(21,32,51,.04); } .v2-filterbar > .semi-card-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 9px; } .v2-search-field { grid-column: 1 / -1; height: 44px; } .v2-search-field input, .v2-filterbar select { font-size: 16px; } .v2-filterbar select, .v2-primary-button, .v2-secondary-button, .v2-filter-live-status { height: 44px; } .v2-primary-button, .v2-secondary-button { padding: 0 10px; font-size: 12px; } .v2-monitor-mode { height: 44px; } .v2-monitor-mode button { flex: 1; font-size: 12px; } .v2-monitor-mobile-entry { height: 44px; font-size: 12px; } .v2-kpis > .semi-card-body { display: flex; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .v2-kpis > .semi-card-body::-webkit-scrollbar { display: none; } .v2-kpi { width: 108px; min-width: 108px; min-height: 70px; flex: 0 0 108px; padding: 11px 13px; scroll-snap-align: start; } .v2-kpi + .v2-kpi::before, .v2-kpi:nth-child(odd)::before { display: block; } .v2-kpi small { font-size: 10px; } .v2-kpi strong { margin-top: 7px; font-size: 20px; } .v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { min-height: calc(52dvh + 360px); flex: none; grid-template-columns: 1fr; grid-template-rows: minmax(360px, 52dvh) 360px; overflow: hidden; } .v2-monitor-table-panel.semi-card { height: clamp(520px, 68dvh, 720px); min-height: 0; flex: none; } .v2-monitor-table-scroll { display: none; } .v2-monitor-mobile-cards { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow: auto; padding: 8px; background: #f5f7fa; } .v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card { overflow: visible; border: 1px solid #e0e6ee; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(21,32,51,.04); content-visibility: auto; contain-intrinsic-size: auto 154px; } .v2-monitor-mobile-card .semi-card-body { padding: 12px; } .v2-monitor-mobile-card .semi-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .v2-monitor-mobile-card .semi-card-body > header div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-monitor-mobile-card .semi-card-body > header strong { font-size: 15px; }.v2-monitor-mobile-card .semi-card-body > header span { color: #7f8da1; font-size: 10px; } .v2-monitor-mobile-card .semi-card-body > header > b { color: #1f4f8d; font-size: 18px; font-variant-numeric: tabular-nums; }.v2-monitor-mobile-card .semi-card-body > header > b small { margin-left: 3px; color: #8996a8; font-size: 8px; font-weight: 500; } .v2-monitor-mobile-cards dl { display: grid; grid-template-columns: .72fr 1.28fr; gap: 10px; margin: 12px 0 0; border-top: 1px solid #edf1f6; padding-top: 11px; } .v2-monitor-mobile-cards dl > div { min-width: 0; }.v2-monitor-mobile-cards dl > div.is-address { grid-column: 1 / -1; } .v2-monitor-mobile-cards dt { color: #8a97a9; font-size: 9px; }.v2-monitor-mobile-cards dd { margin: 4px 0 0; color: #34445a; font-size: 11px; font-weight: 650; } .v2-monitor-mobile-cards dd code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 500; } .v2-monitor-mobile-cards .v2-monitor-address-result > span { white-space: normal; } .v2-monitor-mobile-card .semi-card-body > footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 10px; border-top: 1px solid #edf1f6; padding-top: 10px; } .v2-monitor-card-locate.semi-button { height: 32px; border-radius: 7px; padding: 0 7px; color: var(--v2-blue); font-size: 11px; font-weight: 700; } .v2-monitor-table-panel > .semi-card-body > footer { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 4; background: #fff; } .v2-vehicle-rail { grid-row: 2; border: 0; border-top: 1px solid var(--v2-border); } .v2-fleet-map { grid-row: 1; } .v2-vehicle-rail > header { height: 48px; } .v2-rail-search { height: 40px; } .v2-vehicle-row { min-height: 64px; padding: 9px 11px; } .v2-vehicle-identity strong { font-size: 13px; } .v2-map-controls { top: 8px; right: 8px; gap: 6px; } .v2-map-control-button.semi-button { width: 44px; height: 44px; padding: 0; } .v2-map-control-button .semi-button-content { display: flex; width: 100%; justify-content: center; } .v2-map-control-button .v2-map-control-copy, .v2-map-control-button .v2-map-control-state { display: none; } .v2-map-control-button .semi-icon { display: inline-flex; font-size: 18px; } .v2-province-marker.is-compact { width: 68px; min-height: 38px; grid-template-columns: minmax(0,1fr) auto; gap: 4px; border-radius: 8px; padding: 6px 7px; } .v2-province-marker.is-compact > span { font-size: 11px; } .v2-province-marker.is-compact > strong { font-size: 17px; } .v2-map-legend { right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; height: 36px; justify-content: flex-start; gap: 13px; overflow-x: auto; padding: 0 12px; transform: none; white-space: nowrap; scrollbar-width: none; } .v2-map-legend::-webkit-scrollbar { display: none; } .v2-map-legend b { margin-left: auto; } .v2-vehicle-detail { position: fixed; inset: auto 8px calc(72px + env(safe-area-inset-bottom)) 8px; z-index: 70; display: block; width: auto; height: min(68dvh, 620px); min-height: 300px; contain: layout paint; overscroll-behavior: contain; border: 1px solid #d8e2ed; border-radius: 14px; background: #fff; padding: 18px 15px 20px; box-shadow: 0 -10px 44px rgba(21,32,51,.2); animation: v2-mobile-sheet-enter .18s ease-out; } .v2-vehicle-detail::before { display: block; width: 38px; height: 4px; margin: -8px auto 10px; border-radius: 2px; background: #d7e0eb; content: ""; } .v2-detail-controls { top: 13px; right: 12px; } .v2-detail-controls .semi-button { width: 36px; min-width: 36px; height: 36px; } .v2-detail-title { padding: 0 82px 14px 0; } .v2-detail-title strong { font-size: 18px; } .v2-detail-actions { position: sticky; top: -18px; z-index: 2; background: #fff; padding: 10px 0; } .v2-detail-actions a { min-height: 38px; font-size: 10px; } .v2-detail-list > div { grid-template-columns: 82px minmax(0, 1fr); font-size: 11px; } .v2-metric-grid small { font-size: 10px; } .v2-metric-grid strong { font-size: 17px; } .v2-detail-peek { position: fixed; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 65; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.18); } .v2-detail-peek .semi-button { width: auto; height: 44px; border-radius: 22px; padding: 0 14px; background: #fff; } .v2-detail-peek .semi-button-content { flex-direction: row; gap: 7px; } .v2-detail-peek .semi-button-content > span { max-width: 120px; writing-mode: horizontal-tb; font-size: 11px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } .v2-event-strip > .semi-card-body { flex-wrap: wrap; gap: 7px 12px; padding: 10px 12px; line-height: 1.4; } .v2-event-strip > .semi-card-body > strong { width: 100%; } .v2-refresh-cadence { border-left: 0; padding-left: 0; } .v2-event-strip time { width: 100%; margin: 0; } .v2-vehicle-record-page { overflow: auto; padding: 8px; } .v2-vehicle-search-page { padding: 12px; } .v2-vehicle-search-card { padding: 30px 18px; } .v2-vehicle-search-card form { height: auto; flex-wrap: wrap; padding: 8px; } .v2-vehicle-search-card form button { width: 100%; justify-content: center; } .v2-vehicle-search-page.has-sync-panel { align-content: start; } .v2-profile-sync-panel { padding: 13px; } .v2-profile-sync-fields { grid-template-columns: 1fr; } .v2-profile-sync-result > div { grid-template-columns: repeat(3,1fr); gap: 8px; } .v2-profile-sync-panel > footer button { flex: 1; } .v2-identity-actions { flex-wrap: wrap; } .v2-identity-actions a { flex-basis: calc(50% - 4px); } .v2-identity-meta { grid-template-columns: 1fr; } .v2-identity-meta > div + div { margin-top: 12px; border: 0; border-top: 1px solid var(--v2-border); padding: 12px 0 0; } .v2-single-map-card { min-height: 300px; } .v2-single-map-card footer { align-items: flex-start; flex-direction: column; gap: 4px; padding: 8px 12px; } .v2-telemetry-list { grid-template-columns: 1fr; } .v2-telemetry-list > div:nth-child(odd) { border-right: 0; } .v2-live-grid { grid-template-columns: repeat(2, 1fr); } .v2-live-overview .v2-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-live-grid > div:nth-child(3), .v2-live-grid > div:nth-child(5) { border-left: 0; } .v2-live-grid > div:nth-child(n+3) { border-top: 1px solid var(--v2-border); } .v2-current-location > span { grid-template-columns: auto auto minmax(0,1fr); padding: 10px 12px; } .v2-current-address { grid-template-columns: auto minmax(0,1fr) !important; } .v2-current-address > button:last-child { grid-column: 2; } .v2-history-page { padding: 8px; } .v2-history-toolbar { grid-template-columns: 1fr; } .v2-history-vehicles { grid-column: auto; } .v2-history-range { grid-column: auto; } .v2-history-toolbar button { width: 100%; } .v2-history-summary { grid-template-columns: 1fr 1fr; min-height: 106px; } .v2-history-summary > .semi-card-body > div:nth-child(3)::before { display: none; } .v2-history-main { height: 1111px; grid-template-rows: 106px 385px minmax(0, 600px); } .v2-history-trend-panels { grid-template-columns: 1fr; grid-auto-rows: 152px; } .v2-history-side { display: flex; flex-direction: column; } .v2-access-page { padding: 8px; } .v2-access-filter { grid-template-columns: 1fr; } .v2-access-filter label:first-child { grid-column: auto; } .v2-access-filter button { width: 100%; } .v2-access-advanced > div { grid-template-columns: 1fr; } .v2-access-kpis { grid-template-columns: repeat(2, 1fr); } .v2-access-identity-queue summary { align-items: flex-start; flex-direction: column; gap: 3px; } .v2-access-identity-queue > div { grid-template-columns: 1fr; } .v2-access-kpis button:nth-child(4)::before { display: block; } .v2-access-kpis button:nth-child(odd)::before { display: none; } .v2-access-protocols header { align-items: flex-start; flex-direction: column; gap: 4px; } .v2-access-table-card { height: 600px; } .v2-access-table-card > header { align-items: flex-start; height: auto; flex-direction: column; gap: 7px; padding: 8px 9px; } .v2-access-table-card > header div { width: 100%; overflow-x: auto; } .v2-access-table-card > footer { align-items: flex-start; height: auto; flex-direction: column; gap: 7px; padding: 8px 9px; } .v2-access-side { display: flex; flex-direction: column; } .v2-alert-page { padding: 0 8px 8px; } .v2-alert-heading { margin: 0 -8px; padding: 0 10px; } .v2-alert-heading > div { align-items: flex-start; flex-direction: column; gap: 3px; } .v2-alert-heading p { margin: 0; } .v2-alert-tabs { margin: 0 -8px 8px; padding: 0 9px; } .v2-alert-filter { grid-template-columns: 1fr; } .v2-alert-filter label:first-child { grid-column: auto; } .v2-alert-filter label:nth-of-type(6), .v2-alert-filter label:nth-of-type(7) { display: flex; } .v2-alert-filter button { width: 100%; } .v2-alert-kpis { grid-template-columns: repeat(2,1fr); } .v2-alert-kpis button:nth-child(5)::before { display: block; } .v2-alert-kpis button:nth-child(odd)::before { display: none; } .v2-alert-table-card { height: 590px; } .v2-alert-table-card > .semi-card-body > header, .v2-alert-table-card > .semi-card-body > footer { align-items: flex-start; height: auto; flex-direction: column; gap: 6px; padding: 7px 9px; } .v2-alert-inspector { max-height: none; } .v2-rule-form-grid { grid-template-columns: 1fr; padding: 10px; } .v2-rule-form-grid label.is-wide { grid-column: auto; } .v2-alert-rule-templates { grid-template-columns: 1fr; padding: 10px; } .v2-alert-rule-templates nav { grid-template-columns: 1fr; } .v2-alert-rule-templates button { min-height: 56px; } .v2-alert-rule-editor > footer { align-items: stretch; flex-direction: column; } .v2-alert-notifications > footer { flex-direction: column; gap: 5px; } .v2-ops-page { padding: 8px; }.v2-ops-heading { align-items: flex-start; flex-direction: column; gap: 8px; }.v2-ops-kpis { grid-template-columns: 1fr 1fr; } .v2-reconcile-heading { align-items: flex-start; flex-direction: column; }.v2-reconcile-heading button { width: 100%; justify-content: center; }.v2-reconcile-kpis { display: flex; overflow-x: auto; grid-template-columns: none; scroll-snap-type: x proximity; }.v2-reconcile-kpi-card.semi-card { min-width: 142px; flex: 0 0 142px; scroll-snap-align: start; }.v2-reconcile-layout { display: block; min-height: 520px; }.v2-reconcile-main { border-right: 0; }.v2-reconcile-toolbar { grid-template-columns: 1fr 1fr; }.v2-reconcile-search { grid-column: 1 / -1; }.v2-reconcile-toolbar select:last-child { grid-column: 1 / -1; }.v2-reconcile-trend.semi-card { border-top: 1px solid #e3eaf2; }.v2-reconcile-detail.semi-card { position: fixed; inset: 54px 0 0; width: auto; border-left: 0; }.v2-reconcile-identity { grid-template-columns: 1fr; }.v2-reconcile-identity div + div { border-top: 1px solid #e5ebf2; border-left: 0; }.v2-reconcile-evidence dl div { grid-template-columns: 96px minmax(0,1fr); } .v2-source-search { flex-direction: column; }.v2-source-search > label { width: auto; min-width: 0; height: 42px; }.v2-source-search > button { width: 100%; }.v2-source-candidates { top: 61px; right: 14px; }.v2-source-candidates > button { grid-template-columns: 1fr; gap: 3px; }.v2-source-summary { grid-template-columns: 1fr; }.v2-source-summary article + article, .v2-source-summary article:nth-child(3) { border-top: 1px solid #e7edf4; border-left: 0; }.v2-source-audit > header { height: auto; align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 7px; }.v2-source-audit li { grid-template-columns: 35px minmax(0,1fr); }.v2-source-audit li em { grid-column: 2; } .v2-mileage-page { gap: 10px; padding: 12px 8px 18px; } .v2-mileage-heading { align-items: flex-start; flex-direction: row; gap: 10px; } .v2-mileage-heading h2 { font-size: 18px; } .v2-mileage-heading p { line-height: 1.6; } .v2-mileage-heading > button { width: auto; height: 36px; flex: 0 0 auto; justify-content: center; padding: 0 11px; } .v2-mileage-query-panel { border-radius: 10px; } .v2-mileage-filter { grid-template-columns: 1fr; gap: 12px; padding: 12px; } .v2-mileage-vehicle-field { grid-column: auto; } .v2-mileage-filter > label > input { height: 44px; font-size: 16px; } .v2-mileage-multiselect { min-height: 44px; padding-top: 7px; padding-bottom: 7px; } .v2-mileage-selection > input { height: 28px; font-size: 16px; } .v2-mileage-filter > .v2-primary-button { height: 44px; margin-top: 0; } .v2-mileage-source-strategy { margin-top: 0; } .v2-mileage-source-trigger { width: 100%; height: 44px; justify-content: center; } .v2-mileage-source-list article { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; padding-right: 11px; padding-left: 12px; } .v2-mileage-source-list article > p { grid-column: 2 / -1; justify-content: flex-end; margin-top: -5px; } .v2-mileage-ranges { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; } .v2-mileage-ranges button { height: 36px; background: #f6f8fb; } .v2-mileage-options > button { grid-template-columns: minmax(80px,.7fr) minmax(0,1fr); } .v2-mileage-options > button em { display: none; } .v2-mileage-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-mileage-summary-card > .semi-card-body { padding: 13px 14px 14px !important; } .v2-mileage-summary-secondary .v2-mileage-summary-card { border-bottom: 1px solid #e5eaf1; } .v2-mileage-summary strong { font-size: 18px; } .v2-mileage-results { min-height: 420px; overflow: visible; } .v2-mileage-results > .semi-card-body > header { align-items: flex-start; height: auto; flex-direction: column; gap: 4px; padding: 11px 12px; } .v2-mileage-results > .semi-card-body > header div { align-items: flex-start; flex-direction: column; gap: 3px; } .v2-mileage-results > .semi-card-body > header .v2-mileage-result-actions { width: 100%; align-items: center; justify-content: space-between; flex-direction: row; gap: 8px; } .v2-mileage-result-actions > button { height: 34px; flex: 0 0 auto; } .v2-mileage-export-progress { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px 12px; } .v2-mileage-export-progress > span { min-width: 0; } .v2-mileage-table-wrap { display: block; } .v2-mileage-mobile-list { display: none; } .v2-mileage-mobile-list article { border-bottom: 1px solid #e9eef5; padding: 14px 12px; } .v2-mileage-mobile-list article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .v2-mileage-mobile-list article > header div { min-width: 0; } .v2-mileage-mobile-list article > header strong, .v2-mileage-mobile-list article > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-mobile-list article > header strong { color: #253449; font-size: 13px; } .v2-mileage-mobile-list article > header b { flex: 0 0 auto; color: var(--v2-blue); font-size: 14px; text-align: right; } .v2-mileage-mobile-list article > header b small { display: block; margin-top: 3px; color: var(--v2-muted); font-size: 8px; font-weight: 500; } .v2-mileage-mobile-list article > header span, .v2-mileage-mobile-list time { margin-top: 3px; color: var(--v2-muted); font-size: 9px; } .v2-mileage-mobile-list dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; margin: 12px 0 0; } .v2-mileage-mobile-list dl div { min-width: 0; } .v2-mileage-mobile-list dt { color: var(--v2-muted); font-size: 9px; } .v2-mileage-mobile-list dd { margin: 4px 0 0; overflow: hidden; color: #334155; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-mobile-list dd.is-daily { color: var(--v2-blue); font-size: 14px; } .v2-mileage-mobile-days { display: grid; grid-auto-columns: 84px; grid-auto-flow: column; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 3px; } .v2-mileage-mobile-days > div { border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; padding: 8px; } .v2-mileage-mobile-days time, .v2-mileage-mobile-days strong { display: block; } .v2-mileage-mobile-days time { color: var(--v2-muted); font-size: 8px; } .v2-mileage-mobile-days strong { margin-top: 4px; color: #334155; font-size: 10px; } .v2-mileage-results > .semi-card-body > footer { min-height: 58px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 9px 10px; } .v2-mileage-results > .semi-card-body > footer div { width: 100%; } .v2-mileage-results > .semi-card-body > footer button { height: 34px; } .v2-mileage-results > .semi-card-body > footer div button { flex: 1; } .v2-mileage-evidence { flex-direction: column; line-height: 1.5; } } /* Account administration follows the platform's open table/workspace layout. */ .v2-user-admin { min-height: 100%; padding: 22px 24px 34px; } .v2-user-admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto 18px; max-width: 1480px; } .v2-user-admin-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; } .v2-user-admin-heading p { margin: 7px 0 0; color: var(--v2-muted); font-size: 12px; } .v2-user-admin-heading > button, .v2-user-editor form > footer button, .v2-user-editor-empty button { height: 38px; border: 0; border-radius: 8px; background: var(--v2-blue); padding: 0 16px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; } .v2-user-admin-grid { display: grid; max-width: 1480px; min-height: 690px; margin: 0 auto; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; } .v2-user-list.semi-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 13px; background: #f9fbfd; box-shadow: var(--v2-shadow); } .v2-user-list > .semi-card-body { padding: 12px; } .v2-user-list-summary { display: flex; align-items: baseline; gap: 7px; padding: 8px 9px 14px; color: #7a8798; font-size: 11px; } .v2-user-list-summary strong { color: #26364e; font-size: 20px; } .v2-user-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #dfe9f8; color: #3a5e91; font-weight: 800; } .v2-user-editor.semi-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 13px; box-shadow: var(--v2-shadow); } .v2-user-editor > .semi-card-body { height: 100%; } .v2-user-editor-empty { display: grid; height: 100%; place-content: center; justify-items: center; color: #4a5b72; text-align: center; } .v2-user-editor-empty strong { font-size: 18px; }.v2-user-editor-empty p { margin: 8px 0 18px; color: #8a96a7; font-size: 12px; } .v2-user-editor form { height: 100%; padding: 24px 28px 82px; } .v2-user-editor-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #edf1f5; } .v2-user-editor-title h3 { margin: 0; font-size: 20px; }.v2-user-editor-title p { margin: 6px 0 0; color: #8591a2; font-size: 10px; } .v2-user-status { display: flex; align-items: center; gap: 8px; color: #45556c; font-size: 11px; font-weight: 650; } .v2-user-status input { width: 16px; height: 16px; accent-color: var(--v2-blue); } .v2-user-editor section { padding: 20px 0; border-bottom: 1px solid #edf1f5; } .v2-user-editor h4 { margin: 0 0 14px; color: #2c3d54; font-size: 13px; } .v2-user-editor h4 small { margin-left: 7px; color: #91a0b2; font-size: 9px; font-weight: 500; } .v2-user-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .v2-user-fields label, .v2-vehicle-permission-tools label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #637188; font-size: 10px; font-weight: 650; } .v2-user-fields input, .v2-vehicle-permission-tools input { width: 100%; height: 38px; border: 1px solid #dbe3ed; border-radius: 7px; padding: 0 10px; outline: 0; color: #273750; font-size: 12px; } .v2-user-fields input:focus, .v2-vehicle-permission-tools input:focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-user-fields input:disabled { background: #f5f7fa; color: #8390a0; } .v2-menu-permissions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .v2-menu-permissions label { display: flex; min-width: 0; align-items: flex-start; gap: 10px; border: 1px solid #e0e7ef; border-radius: 8px; padding: 11px; cursor: pointer; } .v2-menu-permissions label.is-selected { border-color: #a9c8fb; background: #f3f7ff; } .v2-menu-permissions input { margin-top: 2px; accent-color: var(--v2-blue); }.v2-menu-permissions span { min-width: 0; }.v2-menu-permissions b, .v2-menu-permissions small { display: block; }.v2-menu-permissions b { color: #33445c; font-size: 11px; }.v2-menu-permissions small { margin-top: 4px; color: #8491a3; font-size: 9px; line-height: 1.5; } .v2-vehicle-permission-heading { display: flex; align-items: center; justify-content: space-between; }.v2-vehicle-permission-heading h4 { margin-bottom: 14px; }.v2-vehicle-permission-heading > button { border: 0; background: transparent; color: #7d899a; cursor: pointer; font-size: 10px; } .v2-vehicle-permission-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .v2-bulk-vin { display: flex; gap: 6px; }.v2-bulk-vin button { flex: 0 0 auto; border: 1px solid #cbd8e9; border-radius: 7px; background: #f7f9fc; padding: 0 11px; color: #46607e; cursor: pointer; font-size: 10px; } .v2-vehicle-candidates { display: grid; max-height: 194px; margin-top: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: auto; border: 1px solid #e1e7ef; border-radius: 8px; padding: 5px; } .v2-vehicle-candidates > p { grid-column: 1/-1; margin: 16px; color: #8996a7; font-size: 10px; } .v2-vehicle-candidates > button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; background: transparent; padding: 8px; text-align: left; cursor: pointer; }.v2-vehicle-candidates > button:hover { background: #f4f7fa; }.v2-vehicle-candidates > button.is-selected { background: #edf4ff; } .v2-vehicle-candidates b, .v2-vehicle-candidates small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-vehicle-candidates b { color: #34455c; font-size: 10px; }.v2-vehicle-candidates small { margin-top: 3px; color: #8a96a6; font-size: 8px; }.v2-vehicle-candidates i { color: var(--v2-blue); font-size: 9px; font-style: normal; } .v2-assigned-vins { display: grid; max-height: 330px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; overflow: auto; margin-top: 10px; } .v2-assigned-vins > article { min-width: 0; border: 1px solid #dbe4ef; border-radius: 9px; background: #f8fafc; padding: 10px; } .v2-assigned-vins article > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .v2-assigned-vins article > header > span { min-width: 0; } .v2-assigned-vins article > header button { width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: #99a4b3; cursor: pointer; font-size: 15px; } .v2-assigned-vins article > header button:hover { background: #eef2f7; color: var(--v2-red); } .v2-assigned-vins b,.v2-assigned-vins small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-assigned-vins b { color: #34455c; font-size: 11px; }.v2-assigned-vins small { margin-top: 3px; color: #8a96a6; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; } .v2-assigned-vins article > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; } .v2-assigned-vins label { min-width: 0; color: #758296; font-size: 9px; } .v2-assigned-vins label span { display: block; margin-bottom: 4px; } .v2-assigned-vins input { width: 100%; height: 32px; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 7px; color: #34455c; font-size: 10px; } .v2-grant-history { margin-top: 12px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; } .v2-grant-history summary { padding: 10px 12px; color: #4c5f78; cursor: pointer; font-size: 10px; font-weight: 700; } .v2-grant-history > div { display: grid; max-height: 250px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: auto; border-top: 1px solid #edf1f5; padding: 8px; } .v2-grant-history article { min-width: 0; border-radius: 7px; background: #f7f9fc; padding: 9px; } .v2-grant-history article header { display: flex; min-width: 0; justify-content: space-between; gap: 8px; color: #34455c; font-size: 10px; } .v2-grant-history article header span { overflow: hidden; color: #8290a3; font: 8px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-grant-history article p { margin: 6px 0 4px; color: #4d6078; font-size: 9px; } .v2-grant-history article small { color: #8996a7; font-size: 8px; line-height: 1.5; } .v2-user-empty { margin: 14px 4px; color: #8b97a7; font-size: 10px; line-height: 1.6; } .v2-user-feedback { margin: 14px 0 0; color: #16805b; font-size: 11px; }.v2-user-feedback.is-error { color: var(--v2-red); } .v2-user-editor form > footer { display: flex; justify-content: flex-end; margin-top: 18px; }.v2-user-editor form > footer button:disabled { opacity: .5; } @media (max-width: 900px) { .v2-auth-screen { grid-template-columns: 1fr; } .v2-auth-intro { display: none; } .v2-auth-card { justify-self: center; } .v2-user-admin { padding: 12px; } .v2-user-admin-grid { grid-template-columns: 230px minmax(560px,1fr); overflow-x: auto; } } @media (max-width: 680px) { .v2-auth-screen { min-height: 100dvh; padding: 16px; } .v2-auth-card { padding: 28px 22px; } .v2-user-admin { padding: 8px 8px 82px; } .v2-user-admin-heading { align-items: flex-start; margin-bottom: 10px; }.v2-user-admin-heading h2 { font-size: 17px; }.v2-user-admin-heading p { display: none; }.v2-user-admin-heading > button { height: 34px; flex: 0 0 auto; padding: 0 10px; font-size: 10px; } .v2-user-admin-grid { display: flex; min-height: 0; flex-direction: column; gap: 8px; } .v2-user-list.semi-card { border-radius: 10px; background: #fff; } .v2-user-list > .semi-card-body { display: flex; gap: 6px; overflow-x: auto; padding: 6px; scroll-snap-type: x proximity; } .v2-user-list-summary { flex: 0 0 auto; padding: 8px; } .v2-user-list > .semi-card-body > .v2-user-list-card.semi-card { scroll-snap-align: start; } .v2-user-editor.semi-card { border-radius: 10px; background: #fff; } .v2-user-editor form { padding: 16px 14px 22px; }.v2-user-fields, .v2-menu-permissions, .v2-vehicle-permission-tools, .v2-vehicle-candidates, .v2-assigned-vins, .v2-grant-history > div { grid-template-columns: 1fr; } .v2-assigned-vins article > div { grid-template-columns: 1fr; } .v2-topbar-actions .v2-current-user { display: inline-flex; width: 36px; min-width: 36px; margin: 0; padding: 0; } .v2-current-user .semi-button-content { display: flex; width: 100%; align-items: center; justify-content: center; } .v2-current-user .semi-button-content > :is(b, .semi-tag, .v2-account-chevron) { display: none; } } @media (max-width: 1280px) { .v2-access-filter-v3 { grid-template-columns: minmax(210px, 1.3fr) repeat(3, minmax(120px, .75fr)) auto auto; } .v2-access-filter-v3 > button { min-width: 76px; } .v2-access-protocol-coverage b { display: none; } .v2-access-workspace-v3.is-inspector-open { position: relative; grid-template-columns: minmax(0, 1fr); } .v2-access-inspector-v3 { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(390px, calc(100% - 40px)); box-shadow: -12px 0 38px rgba(24, 38, 58, .16); } } @media (max-width: 760px) { .v2-batch-search-backdrop { align-items: end; padding: 0; } .v2-batch-search-dialog { width: 100%; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); } .v2-batch-search-dialog textarea { min-height: 32vh; font-size: 16px; } .v2-batch-search-dialog > footer button { min-width: 0; flex: 1; height: 44px; } .v2-access-page-v3 { gap: 9px; padding: 10px 8px 18px; } .v2-access-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .v2-access-heading h2 { font-size: 19px; } .v2-access-heading p { font-size: 11px; } .v2-access-heading > div:last-child { width: 100%; justify-content: space-between; } .v2-access-filter-v3 { grid-template-columns: 1fr 1fr; padding: 11px; } .v2-access-filter-v3 .is-search { grid-column: 1 / -1; } .v2-access-filter-v3 label { font-size: 11px; } .v2-access-filter-v3 input, .v2-access-filter-v3 select, .v2-access-filter-v3 label > div { height: 42px; font-size: 13px; } .v2-access-filter-v3 > button { height: 42px; } .v2-access-kpis-v3 { display: flex; min-height: 56px; overflow-x: auto; scroll-snap-type: x proximity; } .v2-access-kpis-v3 button { min-width: 150px; flex: 0 0 150px; scroll-snap-align: start; } .v2-access-kpis-v3 strong { font-size: 20px; } .v2-access-workspace-v3 { min-height: 620px; flex-basis: 620px; } .v2-access-table-v3 > .semi-card-body > header { align-items: flex-start; min-height: 62px; flex-direction: column; padding: 9px 10px; } .v2-access-table-title { align-items: flex-start; flex-direction: column; gap: 3px; } .v2-access-table-actions { width: 100%; justify-content: space-between; overflow: hidden; } .v2-access-protocol-coverage { overflow-x: auto; } .v2-access-protocol-coverage b { display: inline; } .v2-access-table-v3 > .semi-card-body > footer { align-items: flex-start; min-height: 76px; flex-direction: column; padding: 9px 10px; } .v2-access-table-scroll-v3 table { font-size: 12px; } .v2-access-inspector-v3 { position: fixed; z-index: 30; top: 76px; right: 8px; bottom: 8px; width: calc(100% - 16px); border-radius: 12px; } .v2-access-identity-queue-v3 summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px; } .v2-access-identity-queue-v3 > div { grid-template-columns: 1fr; } .v2-access-settings fieldset { align-items: stretch; flex-direction: column; } .v2-access-settings input { width: 100%; box-sizing: border-box; } } @keyframes v2-mobile-sheet-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 374px) { .v2-nav-label, .v2-sidebar.is-collapsed .v2-nav-label { font-size: 8px; } .v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { grid-template-rows: minmax(330px, 50dvh) 340px; min-height: calc(50dvh + 340px); } .v2-map-legend span:nth-of-type(3), .v2-map-legend span:nth-of-type(4) { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Mobile task-first interaction layer. Desktop keeps the full workspace. */ .v2-mobile-navigation, .v2-mobile-filter-toggle, .v2-alert-mobile-list, .v2-access-mobile-list, .v2-history-mobile-list { display: none; } @media (max-width: 680px) { .v2-mobile-navigation { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; height: calc(66px + env(safe-area-inset-bottom)); grid-template-columns: repeat(var(--v2-mobile-nav-count, 5), minmax(0, 1fr)); border-top: 1px solid #dce4ee; background: rgba(255,255,255,.97); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(20,35,55,.10); backdrop-filter: blur(16px); } .v2-mobile-nav-item { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 0; border-radius: 10px; background: transparent; color: #718096; text-decoration: none; cursor: pointer; } .v2-mobile-nav-item > svg { font-size: 20px; } .v2-mobile-nav-item > span { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .v2-mobile-nav-item.is-active { background: #edf4ff; color: var(--v2-blue); } .v2-mobile-nav-item.is-active::after { position: absolute; right: 22%; bottom: 1px; left: 22%; height: 2px; border-radius: 2px; background: var(--v2-blue); content: ""; } .v2-main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .v2-mobile-filter-toggle.semi-button { display: flex; width: 100%; min-height: 58px; height: auto; flex: 0 0 auto; border: 1px solid #dce5ef; border-radius: 12px; background: linear-gradient(135deg,#fff 0%,#fbfdff 100%); padding: 8px 10px; color: #26364b; box-shadow: 0 5px 18px rgba(25,39,59,.055); text-align: left; } .v2-mobile-filter-toggle.semi-button:hover { border-color: #cad9ec; background: #fff; } .v2-mobile-filter-toggle.semi-button:active { background: #f6f9fd; transform: translateY(1px); } .v2-mobile-filter-toggle.semi-button > .semi-button-content { display: block; width: 100%; min-width: 0; } .v2-mobile-filter-toggle-content { display: grid; width: 100%; min-width: 0; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; } .v2-mobile-filter-toggle-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: #eaf3ff; color: var(--v2-blue); font-size: 16px; } .v2-mobile-filter-toggle-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1.2; } .v2-mobile-filter-toggle-copy b { font-size: 13px; } .v2-mobile-filter-toggle-copy small { overflow: hidden; color: #7a889b; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .v2-mobile-filter-toggle-action { display: inline-flex; min-height: 28px; flex: 0 0 auto; align-items: center; gap: 3px; border-radius: 15px; background: #edf4ff; padding: 0 9px; color: var(--v2-blue); font-size: 11px; font-weight: 700; white-space: nowrap; } .v2-mobile-filter-toggle-action svg { font-size: 12px; } :is(.v2-alert-filter,.v2-alert-filter-card,.v2-access-filter-v3,.v2-access-filter-card-v3,.v2-history-toolbar,.v2-history-filter-card,.v2-mileage-filter,.v2-reconcile-toolbar).is-mobile-collapsed { display: none !important; } .v2-alert-heading > div, .v2-access-heading > div:first-child, .v2-mileage-heading > div { display: none; } .v2-alert-heading { display: none; } .v2-access-heading { justify-content: flex-end; min-height: 40px; } .v2-access-heading > div:last-child { width: 100%; } .v2-mileage-heading { justify-content: flex-end; min-height: 40px; } .v2-kpis > .semi-card-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; } .v2-kpi { width: auto; min-width: 0; min-height: 64px; padding: 9px 11px; } .v2-kpi.is-offline, .v2-kpi.is-idle { display: none; } .v2-kpi + .v2-kpi::before { display: block; } .v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { min-height: max(430px, calc(100dvh - 330px)); grid-template-columns: 1fr; grid-template-rows: minmax(430px, 1fr); } .v2-monitor-workspace > .v2-vehicle-rail { display: none; } .v2-monitor-workspace > .v2-fleet-map { grid-row: 1; } .v2-vehicle-detail { height: min(58dvh, 520px); } .v2-alert-page { gap: 9px; } .v2-alert-kpis { display: flex; min-height: 70px; overflow-x: auto; scroll-snap-type: x proximity; } .v2-alert-kpis button { min-width: 116px; flex: 0 0 116px; scroll-snap-align: start; } .v2-alert-workspace { display: flex; min-height: 0; flex-direction: column; } .v2-alert-table-card { height: auto; min-height: 420px; } .v2-alert-table-scroll { overflow: visible; } .v2-alert-table-scroll table { display: none; } .v2-alert-mobile-list { display: flex; flex-direction: column; background: #f5f7fa; padding: 8px; gap: 8px; } .v2-alert-mobile-list > .v2-alert-mobile-card.semi-card { width: 100%; overflow: hidden; border: 1px solid #e0e7f0; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(20,35,55,.04); content-visibility: auto; contain-intrinsic-size: auto 188px; } .v2-alert-mobile-list > .v2-alert-mobile-card.semi-card.is-selected { border-color: #8eb8f8; box-shadow: inset 3px 0 var(--v2-blue), 0 0 0 2px rgba(18,104,243,.08); } .v2-alert-mobile-action.semi-button { display: block; width: 100%; height: auto; min-height: 0; border-radius: 0; padding: 0; color: #334155; text-align: left; } .v2-alert-mobile-action.semi-button:hover { background: #f8fbff; } .v2-alert-mobile-action.semi-button:active { background: #f1f6ff; } .v2-alert-mobile-action .semi-button-content { display: block; width: 100%; min-width: 0; white-space: normal; } .v2-alert-mobile-card-content { display: block; padding: 12px; } .v2-alert-mobile-card-content header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2-alert-mobile-card-content header > strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-mobile-card-content header > span { display: flex; flex: 0 0 auto; gap: 5px; } .v2-alert-mobile-card-content p { margin: 9px 0; color: #26364b; font-size: 13px; font-weight: 700; } .v2-alert-mobile-card-content dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 10px; } .v2-alert-mobile-card-content dt { color: #8a97a9; font-size: 10px; } .v2-alert-mobile-card-content dd { margin: 3px 0 0; color: #46566c; font-size: 11px; font-weight: 650; } .v2-alert-mobile-card-content footer { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 10px; color: var(--v2-blue); font-size: 11px; font-weight: 700; } .v2-alert-mobile-card-content footer svg { width: 13px; height: 13px; } .v2-alert-inspector { max-height: none; margin-top: 10px; } .v2-access-kpis-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; } .v2-access-kpis-v3 button { min-width: 0; min-height: 74px; flex: none; } .v2-access-workspace-v3 { min-height: 480px; flex-basis: auto; } .v2-access-table-v3 > .semi-card-body > header { min-height: 0; } .v2-access-table-title > span, .v2-access-protocol-coverage { display: none; } .v2-access-table-actions { justify-content: flex-end; } .v2-access-table-scroll-v3 { overflow: visible; } .v2-access-table-scroll-v3 table { display: none; } .v2-access-mobile-list { display: flex; flex-direction: column; gap: 8px; background: #f5f7fa; padding: 8px; } .v2-access-mobile-list .v2-access-protocol-cell { min-width: 0; border-radius: 7px; background: #f7f9fc; padding: 7px; } .v2-access-mobile-list .v2-access-protocol-cell strong { font-size: 9px; } .v2-access-mobile-list .v2-access-protocol-cell small { display: none; } .v2-history-page { gap: 9px; } .v2-history-metrics { max-height: 48px; } .v2-history-main { display: flex; height: auto; min-height: 0; flex-direction: column; } .v2-history-summary { min-height: 92px; } .v2-history-table-card { order: 2; height: auto; min-height: 380px; } .v2-history-trend { order: 3; min-height: 220px; margin-top: 10px; } .v2-history-table-scroll { overflow: visible; } .v2-history-table-scroll table { display: none; } .v2-history-mobile-list { display: flex; flex-direction: column; gap: 8px; background: #f5f7fa; padding: 8px; } .v2-history-mobile-list > .v2-history-mobile-card.semi-card { width: 100%; overflow: hidden; border: 1px solid #e0e7ef; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(20,35,55,.04); content-visibility: auto; contain-intrinsic-size: auto 220px; } .v2-history-mobile-list > .v2-history-mobile-card.semi-card.is-selected { border-color: #8eb8f8; box-shadow: inset 3px 0 var(--v2-blue), 0 0 0 2px rgba(18,104,243,.08); } .v2-history-mobile-action.semi-button { display: block; width: 100%; height: auto; min-height: 0; border-radius: 0; padding: 0; color: #334155; text-align: left; } .v2-history-mobile-action.semi-button:hover { background: #f8fbff; } .v2-history-mobile-action.semi-button:active { background: #f1f6ff; } .v2-history-mobile-action .semi-button-content { display: block; width: 100%; min-width: 0; white-space: normal; } .v2-history-mobile-card-content { display: block; padding: 12px; } .v2-history-mobile-card-content header, .v2-history-mobile-card-content p { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2-history-mobile-card-content header > span:first-child { min-width: 0; } .v2-history-mobile-card-content header strong, .v2-history-mobile-card-content header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-history-mobile-card-content header strong { font-size: 14px; } .v2-history-mobile-card-content header small { margin-top: 3px; color: #8794a5; font-size: 10px; } .v2-history-mobile-card-content p { margin: 9px 0; color: #718096; font-size: 10px; } .v2-history-mobile-card-content p b { color: var(--v2-blue); } .v2-history-mobile-quality { display: block; margin: -2px 0 9px; color: #6d7b8f; font-size: 10px; line-height: 1.45; } .v2-history-mobile-card-content dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 9px; } .v2-history-mobile-card-content dt { color: #8a97a9; font-size: 9px; } .v2-history-mobile-card-content dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; } .v2-history-mobile-card-content footer { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 10px; color: var(--v2-blue); font-size: 11px; font-weight: 700; } .v2-history-mobile-card-content footer svg { width: 13px; height: 13px; } .v2-history-side { margin-top: 10px; } .v2-mileage-query-panel { padding: 8px; } .v2-mileage-query-panel > .semi-card-body > .v2-mobile-filter-toggle { margin-bottom: 8px; } .v2-mileage-filter.is-mobile-collapsed + .v2-mileage-validation { margin-top: 4px; } .v2-track-page.is-rail-collapsed { display: grid; grid-template-columns: minmax(0,1fr); } .v2-track-page.is-rail-collapsed .v2-track-stage { min-height: calc(100dvh - 118px - env(safe-area-inset-bottom)); } } /* Track replay command center — map-first layout based on the G7 reference. */ .v2-track-page { display: grid; width: 100%; height: 100%; min-height: 0; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; background: #e9eef4; } .v2-track-page.has-monitor-return { grid-template-rows: auto minmax(0, 1fr); } .v2-track-page > .v2-monitor-return { margin: 7px 8px; } .v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); } .v2-track-rail { position: relative; z-index: 12; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: visible; border-right: 1px solid #d9e1ea; background: #fff; box-shadow: 8px 0 24px rgba(30, 45, 66, .07); transition: transform .18s ease, opacity .18s ease; } .v2-track-page.is-rail-collapsed .v2-track-rail { opacity: 0; pointer-events: none; transform: translateX(-100%); } .v2-track-query-card.semi-card { flex: 0 0 auto; overflow: visible; border: 0; border-radius: 0; background: #fff; box-shadow: none; } .v2-track-query-card.is-collapsed { border-bottom: 1px solid #e2e8f0; } .v2-track-query-header { min-height: 54px; } .v2-track-query-header .v2-workspace-panel-actions { flex: 0 0 auto; gap: 3px; } .v2-track-query-header .v2-workspace-panel-actions > button { height: 32px; padding: 0; } .v2-track-query-header .v2-track-query-toggle.semi-button { width: auto; min-width: 76px; justify-content: center; border-radius: 7px; padding: 0 8px; color: #49617f; font-size: 9px; font-weight: 700; } .v2-track-query-header .v2-track-query-toggle .semi-icon { color: #7f91a7; transition: transform .16s ease; } .v2-track-query-card:not(.is-collapsed) .v2-track-query-toggle .semi-icon { transform: rotate(90deg); } .v2-track-query-header .v2-track-rail-hide.semi-button { width: 32px; min-width: 32px; border-radius: 7px; color: #77879a; } .v2-track-query { flex: 0 0 auto; border-bottom: 1px solid #e2e8f0; padding: 12px 14px 14px; background: #fff; } .v2-track-query-summary { display: grid; min-height: 50px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 13px 10px; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); } .v2-track-query-summary > span { display: grid; min-width: 0; gap: 4px; } .v2-track-query-summary strong, .v2-track-query-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-query-summary strong { color: #34475e; font-size: 11px; font-weight: 750; } .v2-track-query-summary small { color: #8795a8; font-size: 8px; font-variant-numeric: tabular-nums; } .v2-track-query-summary .semi-tag { max-width: 98px; overflow: hidden; border-radius: 999px; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .v2-track-query > label, .v2-track-date-grid label { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #738197; font-size: 10px; } .v2-track-vehicle-options { position: absolute; z-index: 50; top: calc(100% + 6px); right: -1px; left: -1px; overflow: hidden; border: 1px solid #d8e1ec; border-radius: 9px; background: #fff; box-shadow: 0 16px 36px rgba(29, 43, 63, .16); } .v2-track-vehicle-options header { display: flex; height: 32px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f6; background: #f8fafc; padding: 0 10px; color: #617086; font-size: 9px; } .v2-track-vehicle-options header em { color: #95a1b1; font-style: normal; } .v2-track-vehicle-options > button { display: grid; width: 100%; min-height: 44px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px; border: 0; border-top: 1px solid #f0f3f7; background: #fff; padding: 6px 10px; text-align: left; cursor: pointer; } .v2-track-vehicle-options > button:hover { background: #f3f7ff; } .v2-track-vehicle-options > button strong, .v2-track-vehicle-options > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-vehicle-options > button strong { color: #334155; font-size: 10px; }.v2-track-vehicle-options > button span { color: #8390a2; font-size: 8px; }.v2-track-vehicle-options > button em { color: var(--v2-blue); font-size: 8px; font-style: normal; } .v2-track-vehicle-options > p { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #8390a2; font-size: 9px; } .v2-track-presets { display: flex; gap: 6px; margin: 8px 0; } .v2-track-presets button { height: 25px; flex: 1; border: 1px solid #e0e7f0; border-radius: 5px; background: #f8fafc; color: #64748b; font-family: inherit; font-size: 9px; cursor: pointer; } .v2-track-presets button:hover { border-color: #aac7f6; background: #eef5ff; color: var(--v2-blue); } .v2-track-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; } .v2-track-query-button { display: flex; width: 100%; height: 36px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #2563eb; border-radius: 7px; background: #2563eb; color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, .18); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .v2-track-query-button:disabled { cursor: not-allowed; opacity: .48; } .v2-track-rail-result.semi-card { min-height: 0; flex: 1; overflow: hidden; border: 0; border-radius: 0; background: #fff; box-shadow: none; } .v2-track-rail-result > .semi-card-body { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-track-result-header { min-height: 58px; } .v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography { color: #253348; font-size: 13px; } .v2-track-result-header .v2-workspace-panel-copy > .semi-typography { font-size: 9px; } .v2-track-result-header .v2-workspace-panel-meta { color: #2563eb; font-size: 13px; font-weight: 750; } .v2-track-rail-tabs { display: grid; height: 40px; flex: 0 0 40px; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #dfe6ee; padding: 0 8px; } .v2-track-rail-tabs button { position: relative; border: 0; background: transparent; color: #66758a; font-family: inherit; font-size: 10px; cursor: pointer; } .v2-track-rail-tabs button.is-active { color: #2563eb; font-weight: 700; }.v2-track-rail-tabs button.is-active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: #2563eb; content: ''; } .v2-track-rail-tabs .v2-segmented-tab-count { min-width: 16px; min-height: 16px; padding: 0 4px; font-size: 8px; } .v2-track-rail-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .v2-track-overview-panel { display: grid; padding-bottom: 14px; } .v2-track-overview-card.semi-card { min-width: 0; border: 0; border-bottom: 1px solid #edf1f5; border-radius: 0; background: #fff; box-shadow: none; } .v2-track-overview-card .v2-workspace-panel-header { border-bottom-color: #edf1f5; background: #fbfcfe; } .v2-track-overview-card .v2-workspace-panel-actions { max-width: none; } .v2-track-overview-card .v2-workspace-panel-header .semi-tag { flex: 0 0 auto; border-radius: 999px; font-size: 9px; } .v2-track-overview-card-body { padding: 11px 13px; } .v2-track-quality-card.semi-card.is-good { background: #f7fcf9; } .v2-track-quality-card.semi-card.is-warning { background: #fffaf2; } .v2-track-quality-card.is-good .v2-workspace-panel-header { background: #f3fbf7; } .v2-track-quality-card.is-warning .v2-workspace-panel-header { background: #fff8ed; } .v2-track-quality-card p { margin: 0; color: #526176; font-size: 8px; line-height: 1.55; }.v2-track-quality-card small { display: block; margin-top: 6px; color: #8190a3; font-size: 7px; } .v2-track-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e7edf3; } .v2-track-map, .v2-track-map-canvas { position: absolute; inset: 0; } .v2-track-stage-tools { position: absolute; z-index: 18; top: 14px; right: 14px; display: flex; gap: 7px; } .v2-track-stage-tools button { display: flex; height: 34px; align-items: center; gap: 6px; border: 1px solid #d7e0eb; border-radius: 7px; background: rgba(255, 255, 255, .95); padding: 0 10px; color: #607086; box-shadow: 0 5px 15px rgba(26, 42, 63, .1); backdrop-filter: blur(8px); font-family: inherit; font-size: 9px; cursor: pointer; } .v2-track-stage-tools button.is-active { border-color: #a8c5f4; background: #eef5ff; color: #2563eb; }.v2-track-stage-tools button:disabled { cursor: not-allowed; opacity: .45; } .v2-track-rail-expand { position: absolute; z-index: 19; top: 50%; left: 0; display: flex; min-height: 108px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 1px solid #cfd9e5; border-left: 0; border-radius: 0 10px 10px 0; background: rgba(255,255,255,.96); padding: 10px 7px; color: #2f6fcb; box-shadow: 5px 7px 18px rgba(26,42,63,.14); backdrop-filter: blur(8px); font-family: inherit; cursor: pointer; transform: translateY(-50%); } .v2-track-rail-expand span { max-width: 1em; font-size: 10px; font-weight: 700; line-height: 1.2; } .v2-track-rail-expand .semi-icon { font-size: 16px; } .v2-track-coverage-float { position: absolute; z-index: 16; top: 14px; left: 14px; display: grid; width: min(510px, calc(100% - 450px)); min-height: 34px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(209, 221, 234, .94); border-radius: 7px; background: rgba(255, 255, 255, .94); padding: 5px 10px; color: #65748a; box-shadow: 0 5px 16px rgba(26, 42, 63, .09); backdrop-filter: blur(9px); font-size: 8px; } .v2-track-coverage-float > i { width: 7px; height: 7px; border-radius: 50%; background: #18a86b; }.v2-track-coverage-float.is-warning > i { background: #f1a238; }.v2-track-coverage-float > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-coverage-float strong { margin-right: 7px; color: #354358; font-size: 9px; }.v2-track-coverage-float em { color: #758399; font-size: 8px; font-style: normal; white-space: nowrap; } .v2-track-current-card.semi-card { --track-overlay-text: #f8fbff; --track-overlay-muted: #c8d3df; position: absolute; z-index: 16; top: 60px; left: 14px; width: 292px; overflow: hidden; border: 1px solid rgba(221, 230, 240, .56); border-radius: 9px; background: rgba(25, 36, 52, .95); color: var(--track-overlay-text); box-shadow: 0 12px 30px rgba(15, 23, 42, .24); backdrop-filter: blur(12px); } .v2-track-current-card > .semi-card-body > div { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }.v2-track-current-card > .semi-card-body > div > span { min-width: 0; padding: 8px 10px; }.v2-track-current-card > .semi-card-body > div > span + span { border-left: 1px solid rgba(255, 255, 255, .14); }.v2-track-current-card small, .v2-track-current-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-current-card small { color: #bdc8d6; font-size: 7px; }.v2-track-current-card > .semi-card-body > div strong { margin-top: 4px; color: var(--track-overlay-text); font-size: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, .16); }.v2-track-current-card em { color: #c4cfdb; font-size: 7px; font-style: normal; font-weight: 500; } .v2-track-current-card > .semi-card-body > p { margin: 0; overflow: hidden; padding: 8px 11px; color: #d5dde7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-empty-state.semi-card { position: absolute; z-index: 14; top: 50%; left: 50%; width: min(330px, calc(100% - 36px)); transform: translate(-50%, calc(-50% - 56px)); border: 1px solid rgba(211, 221, 232, .95); border-radius: 12px; background: rgba(255, 255, 255, .93); color: #8a97a8; box-shadow: 0 14px 36px rgba(27, 42, 61, .1); text-align: center; backdrop-filter: blur(10px); }.v2-track-empty-state > .semi-card-body { display: flex; align-items: center; flex-direction: column; padding: 24px !important; }.v2-track-empty-state > .semi-card-body > svg { color: #2563eb; font-size: 28px; }.v2-track-empty-state strong { margin-top: 10px; color: #344256; font-size: 13px; }.v2-track-empty-state p { margin: 6px 0 14px; font-size: 9px; }.v2-track-empty-state button { display: flex; height: 34px; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: #2563eb; padding: 0 12px; color: #fff; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; } .v2-track-loading { position: absolute; z-index: 25; top: 14px; left: 50%; display: flex; height: 34px; align-items: center; gap: 8px; transform: translateX(-50%); border: 1px solid #d9e2ec; border-radius: 7px; background: rgba(255, 255, 255, .96); padding: 0 12px; color: #59687c; box-shadow: 0 8px 20px rgba(30, 45, 66, .13); font-size: 9px; } .v2-track-error { position: absolute; z-index: 28; top: 56px; right: 14px; width: min(420px, calc(100% - 28px)); } .v2-track-marker { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(29, 44, 65, .28); }.v2-track-marker span { font-size: 8px; font-weight: 800; line-height: 1; }.v2-track-marker.is-start { background: #18a86b; }.v2-track-marker.is-end { background: #e64c4c; }.v2-track-marker.is-stop { width: 22px; height: 22px; border-width: 2px; background: #f1a238; } .v2-track-current-marker { position: relative; width: 42px; height: 42px; }.v2-track-current-marker > i { position: absolute; inset: 2px; border: 2px solid rgba(37, 99, 235, .45); border-radius: 50%; animation: v2-track-pulse 1.8s ease-out infinite; }.v2-track-current-marker > span { position: absolute; top: 13px; left: 13px; width: 16px; height: 16px; box-sizing: border-box; border: 4px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 3px 9px rgba(37, 99, 235, .5); } @keyframes v2-track-pulse { 0% { opacity: .9; transform: scale(.45); } 80%, 100% { opacity: 0; transform: scale(1); } } .v2-track-playback-dock.semi-card { position: absolute; z-index: 20; right: 0; bottom: 0; left: 0; min-height: 112px; overflow: hidden; border: 0; border-top: 1px solid rgba(202, 214, 228, .95); border-radius: 0; background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 26px rgba(24, 38, 58, .11); backdrop-filter: blur(14px); } .v2-track-playback-dock > .semi-card-body { display: grid; min-height: 112px; grid-template-columns: 145px minmax(260px, 1fr) auto; align-items: center; gap: 18px; padding: 12px 16px !important; } .v2-track-dock-summary { min-width: 0; }.v2-track-dock-summary strong, .v2-track-dock-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-dock-summary strong { color: #263448; font-size: 17px; letter-spacing: -.02em; }.v2-track-dock-summary span { margin-top: 5px; color: #7e8b9d; font-size: 8px; } .v2-track-dock-progress { min-width: 0; }.v2-track-segment-rail { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 5px; background: #e8edf3; }.v2-track-segment-rail > span { min-width: 2px; border-right: 1px solid rgba(255, 255, 255, .55); background: #b9e6d0; }.v2-track-segment-rail > span.is-stopped { background: #f8d797; }.v2-track-segment-rail > span.is-gap { background: #f2a7a7; }.v2-track-segment-placeholder { height: 10px; border-radius: 5px; background: #e7ecf2; } .v2-track-progress-slider.semi-slider-wrapper { width: 100%; margin: 11px 0 6px; padding: 4px 0; } .v2-track-progress-slider .semi-slider-rail { height: 4px; border-radius: 2px; background: #dce4ee; } .v2-track-progress-slider .semi-slider-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #1b73e8, #438df1); } .v2-track-progress-slider .semi-slider-handle { width: 16px; height: 16px; margin-top: -6px; border: 3px solid #fff; background: #1677ff; box-shadow: 0 2px 8px rgba(22,119,255,.35); } .v2-track-progress-slider:hover .semi-slider-handle, .v2-track-progress-slider .semi-slider-handle:focus-visible { box-shadow: 0 0 0 4px rgba(22,119,255,.14), 0 2px 8px rgba(22,119,255,.35); } .v2-track-progress-slider.semi-slider-disabled, .v2-track-progress-slider[aria-disabled="true"] { cursor: not-allowed; opacity: .48; }.v2-track-progress-meta { display: flex; justify-content: space-between; color: #7c899a; font-size: 8px; }.v2-track-dock-progress time { color: #4b596d; font-variant-numeric: tabular-nums; } .v2-track-dock-controls { display: flex; align-items: center; gap: 6px; }.v2-track-dock-controls > button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d8e1eb; border-radius: 50%; background: #fff; color: #5c6b7f; cursor: pointer; }.v2-track-dock-controls > button.is-primary { width: 42px; height: 42px; border-color: #2563eb; background: #2563eb; color: #fff; box-shadow: 0 5px 14px rgba(37, 99, 235, .25); }.v2-track-dock-controls > button:disabled { cursor: not-allowed; opacity: .36; } .v2-track-dock-controls label { display: flex; height: 32px; align-items: center; gap: 5px; border: 1px solid #d8e1eb; border-radius: 16px; padding: 0 8px 0 10px; color: #7c899a; font-size: 8px; }.v2-track-dock-controls select { border: 0; background: transparent; color: #3f4e63; outline: 0; font-family: inherit; font-size: 9px; font-weight: 700; } .v2-track-dock-metrics { display: none; align-items: center; }.v2-track-dock-metrics > span { min-width: 92px; padding: 0 12px; }.v2-track-dock-metrics > span + span { border-left: 1px solid #e2e8f0; }.v2-track-dock-metrics small, .v2-track-dock-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-dock-metrics small { color: #8a97a8; font-size: 7px; }.v2-track-dock-metrics strong { margin-top: 5px; color: #405066; font-size: 9px; } @media (min-width: 1680px) { .v2-track-page { grid-template-columns: 340px minmax(0, 1fr); } .v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); } .v2-track-playback-dock > .semi-card-body { grid-template-columns: 150px minmax(310px, 1fr) auto auto; } .v2-track-dock-metrics { display: flex; } } @media (max-width: 1100px) { .v2-track-page { grid-template-columns: 286px minmax(0, 1fr); } .v2-track-page.is-rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); } .v2-track-current-card { width: 260px; } .v2-track-coverage-float { width: min(420px, calc(100% - 360px)); } .v2-track-playback-dock > .semi-card-body { grid-template-columns: minmax(250px, 1fr) auto; gap: 12px; } .v2-track-dock-summary, .v2-track-dock-metrics { display: none; } } @media (max-width: 700px) { .v2-track-page, .v2-track-page.is-rail-collapsed { position: relative; display: block; height: 100%; min-height: 0; overflow: hidden; } .v2-track-stage { width: 100%; height: 100%; } .v2-track-rail { position: fixed; z-index: 72; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; width: auto; height: min(76dvh, 680px); border: 1px solid #d7e0ea; border-radius: 16px; box-shadow: 0 -14px 46px rgba(22, 34, 50, .22); transform: translateY(0); } .v2-track-rail::before { display: block; width: 40px; height: 4px; flex: 0 0 4px; margin: 8px auto 0; border-radius: 2px; background: #d5dee9; content: ''; } .v2-track-page.is-rail-collapsed .v2-track-rail { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 90px)); } .v2-track-query { padding: 9px 12px 10px; } .v2-track-query-header .v2-workspace-panel-actions > .semi-button { height: 34px; } .v2-track-query-header .v2-track-query-toggle.semi-button { min-width: 82px; font-size: 10px; } .v2-track-query-header .v2-track-rail-hide.semi-button { width: 34px; min-width: 34px; transform: rotate(-90deg); } .v2-track-query-summary { min-height: 56px; padding: 8px 13px 11px; } .v2-track-query-summary strong { font-size: 12px; } .v2-track-query-summary small, .v2-track-query-summary .semi-tag { font-size: 9px; } .v2-track-date-grid { grid-template-columns: 1fr; gap: 6px; } .v2-track-presets { margin: 6px 0; } .v2-track-presets > .semi-button { height: 32px; } .v2-track-query-button.semi-button { height: 42px; font-size: 13px; } .v2-track-rail-tabs { height: 42px; flex-basis: 42px; } .v2-track-overview-card-body { padding: 12px 13px; } .v2-track-overview-card header strong { font-size: 11px; } .v2-track-overview-card header .semi-tag { font-size: 9px; } .v2-track-quality-card p { font-size: 9px; } .v2-track-quality-card small { font-size: 8px; } .v2-track-stage-tools { top: 8px; right: 8px; gap: 6px; }.v2-track-stage-tools button { width: 40px; height: 40px; justify-content: center; padding: 0; }.v2-track-stage-tools .semi-button-content { font-size: 0; }.v2-track-stage-tools .semi-button-content > .semi-icon { display: inline-flex; font-size: 17px; } .v2-track-rail-expand { z-index: 21; top: auto; bottom: calc(132px + env(safe-area-inset-bottom)); min-height: 48px; flex-direction: row; padding: 0 12px 0 10px; transform: none; } .v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand { bottom: calc(248px + env(safe-area-inset-bottom)); } .v2-track-rail-expand span { max-width: none; font-size: 11px; } .v2-track-coverage-float { top: 56px; right: 8px; left: 8px; width: auto; min-height: 36px; grid-template-columns: 7px minmax(0, 1fr); }.v2-track-coverage-float > span { white-space: nowrap; }.v2-track-coverage-float > span:not(strong) { font-size: 0; }.v2-track-coverage-float strong { font-size: 10px; }.v2-track-coverage-float em { display: none; } .v2-track-current-card.semi-card { top: auto; right: 8px; bottom: 126px; left: 8px; width: auto; height: auto; border-radius: 9px; }.v2-track-current-card .v2-workspace-panel-header { padding: 8px 10px 6px; }.v2-track-current-card > .semi-card-body > div > span { padding: 6px 9px; }.v2-track-current-card > .semi-card-body > p { display: none; } .v2-track-empty-state { width: min(300px, calc(100% - 28px)); transform: translate(-50%, calc(-50% - 42px)); }.v2-track-empty-state > .semi-card-body { padding: 20px 16px !important; } .v2-track-loading { top: 103px; width: max-content; max-width: calc(100% - 20px); } .v2-track-error { top: 103px; right: 8px; width: calc(100% - 16px); } .v2-track-playback-dock, .v2-track-playback-dock > .semi-card-body { min-height: 118px; }.v2-track-playback-dock > .semi-card-body { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 9px !important; }.v2-track-dock-summary, .v2-track-dock-metrics { display: none; }.v2-track-dock-progress { align-self: center; }.v2-track-dock-controls { align-self: center; gap: 4px; }.v2-track-dock-controls > button { width: 34px; height: 34px; }.v2-track-dock-controls > button.is-primary { width: 42px; height: 42px; }.v2-track-dock-controls > button:first-child, .v2-track-dock-controls > button:nth-child(3), .v2-track-dock-controls > button:last-child { display: none; }.v2-track-dock-controls label { height: 34px; padding: 0 6px; }.v2-track-dock-controls label > span { display: none; } .v2-track-progress-meta span { display: none; } } /* Shared workspace scale — aligns data pages with the monitor command center. */ :is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) { --v2-workspace-title: 22px; --v2-workspace-body: 13px; --v2-workspace-control: 12px; --v2-workspace-meta: 11px; --v2-workspace-row: 48px; font-size: var(--v2-workspace-body); } :is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(button, input, select, textarea) { font-size: var(--v2-workspace-control); } :is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(p, li, dt, dd, td) { font-size: var(--v2-workspace-control); line-height: 1.5; } :is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(small, time, code) { font-size: var(--v2-workspace-meta); line-height: 1.45; } :is(.v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(h2) { font-size: var(--v2-workspace-title); line-height: 1.25; letter-spacing: -.03em; } :is(.v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(h3) { font-size: 14px; line-height: 1.35; } :is(.v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) :where(table th) { font-size: var(--v2-workspace-meta); line-height: 1.35; } /* Vehicle lookup and detail. */ .v2-vehicle-search-card { width: min(620px, 100%); padding: 38px 42px; } .v2-vehicle-search-card h2, .v2-not-found h2 { font-size: 24px; } .v2-vehicle-search-card > p, .v2-not-found p { font-size: 13px; } .v2-vehicle-search-card input { height: 42px; font-size: 14px; } .v2-vehicle-record-page { gap: 14px; padding: 16px 20px 20px; } .v2-vehicle-record-page header strong, .v2-vehicle-record-page article strong { font-size: 13px; } .v2-vehicle-record-page .v2-plate { min-height: 40px; font-size: 17px; } .v2-vehicle-record-page .v2-live-grid strong { font-size: 18px; } .v2-vehicle-record-page .v2-record-list > div, .v2-vehicle-record-page .v2-telemetry-list > div { min-height: 42px; font-size: 12px; } .v2-vehicle-record-page .v2-telemetry-list strong { font-size: 12px; } .v2-vehicle-record-page .v2-identity-actions a { height: 38px; font-size: 12px; } /* Track replay keeps the map-first layout while making command chrome readable. */ .v2-track-page { grid-template-columns: 340px minmax(0, 1fr); } .v2-track-query { padding: 16px; } .v2-track-query-header .v2-workspace-panel-copy > h5.semi-typography { font-size: 16px; } .v2-track-query-header .v2-workspace-panel-copy > .semi-typography, .v2-track-query > label, .v2-track-date-grid label { font-size: 11px; } .v2-track-vehicle-picker { height: 42px; } .v2-track-presets > .semi-button { height: 30px; font-size: 11px; } .v2-track-query-button.semi-button { height: 40px; font-size: 13px; } .v2-track-page header strong, .v2-track-stop-list button strong, .v2-track-event-list button strong, .v2-track-overview-panel strong { font-size: 12px; } .v2-track-page small, .v2-track-stop-list button small, .v2-track-event-list button small { font-size: 10px; } .v2-track-evidence-list .v2-track-list-action.semi-button { min-height: 56px; } .v2-track-stage-tools > .semi-button { height: 38px; font-size: 11px; } .v2-track-coverage-float { min-height: 38px; font-size: 10px; } .v2-track-coverage-float strong { font-size: 12px; } .v2-track-current-card { width: 310px; } .v2-track-current-card .v2-workspace-panel-copy > h5.semi-typography { font-size: 14px; } .v2-track-current-card > .semi-card-body > div strong { font-size: 12px; } .v2-track-current-card > .semi-card-body > p { font-size: 10px; } .v2-track-dock-summary strong { font-size: 18px; } .v2-track-dock-summary span, .v2-track-progress-meta, .v2-track-dock-controls label { font-size: 10px; } /* History data table. */ .v2-history-page { gap: 12px; padding: 16px 20px 20px; } .v2-history-toolbar { padding: 14px 16px; } .v2-history-toolbar label, .v2-history-range legend { font-size: 11px; } .v2-history-toolbar input, .v2-history-toolbar select { height: 38px; font-size: 12px; } .v2-history-range > div { height: 38px; } .v2-history-range > div input { height: 36px; font-size: 12px; } .v2-history-range > div span { font-size: 11px; } .v2-history-summary { min-height: 76px; } .v2-history-summary small { font-size: 11px; } .v2-history-summary strong { font-size: 20px; } .v2-history-table-card > .semi-card-body > header { min-height: 48px; padding: 0 14px; } .v2-history-table-card > .semi-card-body > header strong { font-size: 14px; } .v2-history-table-scroll table { font-size: 12px; } .v2-history-table-scroll th { height: 42px; } .v2-history-table-scroll td { height: 46px; } .v2-history-table-card > .semi-card-body > footer { min-height: 44px; font-size: 11px; } .v2-history-side header strong, .v2-history-evidence strong { font-size: 13px; } /* Mileage query already uses the monitor palette; align its compact metadata. */ .v2-mileage-page { gap: 14px; padding: 18px 20px 20px; } .v2-mileage-heading h2 { font-size: 24px; } .v2-mileage-heading p { font-size: 13px; } .v2-mileage-filter > label { font-size: 12px; } .v2-mileage-filter > label > input, .v2-mileage-multiselect, .v2-mileage-source-trigger { min-height: 42px; font-size: 13px; } .v2-mileage-selection > input { font-size: 13px; } .v2-mileage-chip { height: 28px; font-size: 11px; } .v2-mileage-summary small, .v2-mileage-summary span { font-size: 11px; } .v2-mileage-results > .semi-card-body > header strong { font-size: 14px; } .v2-mileage-results > .semi-card-body > header span, .v2-mileage-results > .semi-card-body > header em, .v2-mileage-results > .semi-card-body > footer { font-size: 11px; } .v2-mileage-table { font-size: 13px; } .v2-mileage-table th { height: 44px; font-size: 12px; } .v2-mileage-table td { height: 54px; } /* Alert center: the previous 6–9px command-center scale was unreadable. */ .v2-alert-page { gap: 12px; overflow: auto; padding: 14px 18px 18px; background: var(--v2-bg); } .v2-alert-heading { min-height: 50px; margin: 0; background: transparent; padding: 0; } .v2-alert-heading h2 { font-size: 22px; } .v2-alert-heading p { margin-left: 14px; font-size: 12px; } .v2-alert-tabs { min-height: 42px; margin: 0; border: 1px solid var(--v2-border); border-radius: 9px 9px 0 0; padding: 0 14px; } .v2-alert-tabs button { font-size: 12px; } .v2-alert-filter { gap: 9px; padding: 12px; } .v2-alert-filter label { gap: 6px; font-size: 11px; } .v2-alert-filter label > div, .v2-alert-filter input, .v2-alert-filter select, .v2-alert-filter button { height: 36px; font-size: 12px; } .v2-alert-kpis-card.semi-card { min-height: 76px; margin-top: 0; } .v2-alert-kpis { min-height: 76px; } .v2-alert-kpis small { font-size: 11px; } .v2-alert-kpis strong { font-size: 21px; } .v2-alert-workspace { min-height: 520px; grid-template-columns: minmax(760px, 1fr) 360px; gap: 12px; margin-top: 0; } .v2-alert-page strong { font-size: 12px; } .v2-alert-table-card > .semi-card-body > header { min-height: 44px; padding: 0 12px; } .v2-alert-table-card > .semi-card-body > header strong { font-size: 14px; } .v2-alert-table-card > .semi-card-body > header span { font-size: 11px; } .v2-alert-table-card > .semi-card-body > header button { height: 32px; font-size: 11px; } .v2-alert-table-scroll table { font-size: 11px; } .v2-alert-table-scroll th { height: 40px; } .v2-alert-table-scroll td { height: 46px; } .v2-alert-table-scroll td small { font-size: 10px; } .v2-alert-table-card > .semi-card-body > footer { min-height: 42px; font-size: 11px; } .v2-alert-table-card > .semi-card-body > footer button, .v2-alert-table-card > .semi-card-body > footer select { height: 30px; font-size: 11px; } .v2-alert-inspector > .semi-card-body > header strong { font-size: 14px; } .v2-alert-inspector h3 { font-size: 12px; } .v2-alert-inspector dl > div { min-height: 30px; align-items: center; font-size: 11px; } .v2-alert-actions button { height: 34px; font-size: 11px; } .v2-alert-rule-list > header strong, .v2-alert-rule-editor > header strong { font-size: 14px; } .v2-alert-rule-list > button { min-height: 66px; } .v2-alert-rule-list > button strong, .v2-alert-notifications article strong { font-size: 12px; } .v2-alert-rule-list > button small, .v2-alert-notifications article span { font-size: 10px; } .v2-rule-form-grid label { font-size: 11px; } .v2-rule-form-grid input, .v2-rule-form-grid select, .v2-rule-form-grid textarea { font-size: 12px; } .v2-alert-rule-templates { grid-template-columns: 190px minmax(0,1fr); } .v2-alert-rule-templates > div strong { font-size: 13px; } .v2-alert-rule-templates > div span, .v2-alert-rule-templates button small { font-size: 10px; } .v2-alert-rule-templates button b { font-size: 12px; } /* Access management: preserve the table-first layout and enlarge work text. */ .v2-access-page-v3 { gap: 14px; padding: 18px 20px 22px; } .v2-access-heading h2 { font-size: 22px; } .v2-access-heading p { font-size: 12px; } .v2-access-page strong { font-size: 12px; } .v2-access-filter-v3 { padding: 13px 15px; } .v2-access-filter-v3 label { gap: 6px; font-size: 11px; } .v2-access-filter-v3 input, .v2-access-filter-v3 select, .v2-access-filter-v3 label > div, .v2-access-filter-v3 > button { height: 38px; font-size: 12px; } .v2-access-kpis-card-v3.semi-card, .v2-access-kpis-v3 { min-height: 76px; } .v2-access-kpis-v3 small { font-size: 11px; } .v2-access-kpis-v3 strong { font-size: 20px; } .v2-access-table-v3 > .semi-card-body > header { min-height: 54px; padding: 0 14px; } .v2-access-table-title strong { font-size: 14px; } .v2-access-table-title span { font-size: 11px; } .v2-access-table-scroll-v3 table { font-size: 12px; } .v2-access-table-scroll-v3 th { height: 42px; font-size: 11px; } .v2-access-table-scroll-v3 td { height: 56px; } .v2-access-table-v3 > .semi-card-body > footer { min-height: 44px; font-size: 11px; } .v2-access-inspector-summary span, .v2-access-protocol-cell span { font-size: 11px; } /* Mileage query: one dominant conclusion, compact controls, data-first results. */ .v2-mileage-page { gap: 12px; padding: 18px 20px 20px; } .v2-mileage-summary > .is-primary small, .v2-mileage-summary > .is-primary span { font-size: 11px; } .v2-mileage-summary-secondary small, .v2-mileage-summary-secondary span { font-size: 11px; } .v2-mileage-table th { height: 46px; } .v2-mileage-table td { height: 56px; } .v2-mileage-mobile-day-heading { display: none; } @media (max-width: 1280px) { .v2-alert-workspace { grid-template-columns: minmax(650px, 1fr) 330px; } .v2-track-page { grid-template-columns: 310px minmax(0, 1fr); } } @media (max-width: 900px) { :is(.v2-vehicle-search-page, .v2-vehicle-record-page, .v2-track-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page) { --v2-workspace-control: 13px; --v2-workspace-meta: 11px; } .v2-vehicle-record-page, .v2-history-page, .v2-mileage-page, .v2-alert-page, .v2-access-page-v3 { padding: 12px 10px 18px; } .v2-alert-heading > div { align-items: flex-start; flex-direction: column; gap: 4px; } .v2-alert-heading p { margin-left: 0; } .v2-alert-workspace { min-height: 700px; grid-template-columns: minmax(650px, 1fr); } } @media (max-width: 700px) { .v2-track-page { display: block; } .v2-track-page > .v2-monitor-return { margin: 7px; } .v2-monitor-return { min-height: 34px; gap: 7px; padding: 4px 6px; } .v2-monitor-return a { height: 27px; padding: 0 8px; } .v2-monitor-return span { flex: 1; } .v2-monitor-return em { display: none; } .v2-track-query > label, .v2-track-date-grid label { font-size: 12px; } .v2-track-query-button { font-size: 13px; } .v2-alert-tabs { overflow-x: auto; } .v2-alert-tabs button { min-width: max-content; } } /* Keep mobile task layouts authoritative after the desktop typography layer. */ @media (max-width: 680px) { .v2-alert-heading { display: none; } .v2-alert-workspace { display: flex; min-height: 0; grid-template-columns: none; flex-direction: column; } .v2-alert-table-card { height: auto; min-height: 420px; } .v2-alert-table-scroll table { display: none; } .v2-alert-mobile-list { display: flex; } .v2-access-heading > div:first-child, .v2-mileage-heading > div { display: none; } .v2-access-kpis-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; } .v2-access-kpis-v3 button { min-width: 0; flex: none; } .v2-access-kpis-v3 small { flex: 0 0 auto; white-space: nowrap; } .v2-access-kpis-v3 em { display: none; } .v2-access-workspace-v3 { min-height: 480px; flex-basis: auto; } .v2-access-table-scroll-v3 table { display: none; } .v2-access-mobile-list { display: flex; } .v2-history-main { display: flex; height: auto; min-height: 0; flex-direction: column; } .v2-history-table-card { height: auto; min-height: 380px; order: 2; } .v2-history-trend { order: 3; } .v2-history-table-scroll table { display: none; } .v2-history-mobile-list { display: flex; } :is(.v2-alert-filter,.v2-alert-filter-card,.v2-access-filter-v3,.v2-access-filter-card-v3,.v2-history-toolbar,.v2-history-filter-card,.v2-mileage-filter,.v2-reconcile-toolbar).is-mobile-collapsed { display: none !important; } .v2-track-page.is-rail-collapsed { display: grid; grid-template-columns: minmax(0,1fr); } .v2-mileage-page { gap: 7px; padding: 7px 7px 14px; } .v2-mileage-query-panel { padding: 7px; border-radius: 11px; } .v2-mileage-query-panel > .semi-card-body > .v2-mobile-filter-toggle { min-height: 52px; margin: 0 0 7px; padding: 6px 8px; } .v2-mileage-ranges { grid-template-columns: repeat(5,minmax(0,1fr)); } .v2-mileage-ranges button { height: 36px; padding: 0 3px; font-size: 10px; } .v2-mileage-summary { display: grid; grid-template-columns: 1fr; gap: 6px; border: 0; background: transparent; } .v2-mileage-summary > .is-primary { min-height: 82px; border-radius: 9px; } .v2-mileage-summary > .is-primary > .semi-card-body { min-height: 82px; padding: 11px 14px 12px !important; } .v2-mileage-summary > .is-primary strong { margin: 4px 0 2px; font-size: 25px; } .v2-mileage-summary-secondary { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid #e1e7ef; border-radius: 10px; } .v2-mileage-summary-secondary .v2-mileage-summary-card { border-bottom: 0; } .v2-mileage-summary-secondary .v2-mileage-summary-card > .semi-card-body { min-height: 70px; justify-content: flex-start; padding: 9px 9px 8px !important; } .v2-mileage-summary-secondary .v2-mileage-summary-card + .v2-mileage-summary-card > .semi-card-body::before { inset: 9px auto 9px 0; } .v2-mileage-summary-secondary strong { margin: 4px 0 2px; font-size: 16px; } .v2-mileage-summary-secondary span { overflow: hidden; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-results { min-height: 430px; border-radius: 12px; } .v2-mileage-results > .semi-card-body > header { gap: 5px; padding: 9px 10px; } .v2-mileage-results > .semi-card-body > header div:first-child { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; } .v2-mileage-results > .semi-card-body > header strong { font-size: 14px; } .v2-mileage-results > .semi-card-body > header .v2-mileage-result-actions { gap: 6px; } .v2-mileage-results > .semi-card-body > header .v2-mileage-result-actions em { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-result-actions > button { height: 32px; padding: 0 9px; font-size: 10px; } .v2-mileage-table-wrap { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; } .v2-mileage-table { width: max-content; min-width: 100%; font-size: 10px; } .v2-mileage-table th { height: 38px; padding: 0 8px; font-size: 9px; } .v2-mileage-table td { height: 44px; padding: 0 8px; font-size: 10px; } .v2-mileage-table .is-vin { display: none; } .v2-mileage-table .is-plate { left: 0; width: 92px; min-width: 92px; max-width: 92px; border-right: 1px solid #d8e0ea; box-shadow: 5px 0 10px rgba(15,23,42,.035); } .v2-mileage-table td.is-plate strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-table .is-date { width: 76px; min-width: 76px; } .v2-mileage-table .is-total { width: 104px; min-width: 104px; padding-right: 10px; } .v2-mileage-table .is-daily { font-size: 10px; } .v2-mileage-table .is-period { font-size: 11px; } .v2-source-evidence-trigger { min-height: 58px; padding: 10px 11px; } .v2-source-evidence-trigger strong { font-size: 13px; } .v2-source-evidence-trigger span { max-width: 220px; font-size: 10px; } .v2-source-evidence-trigger button { height: 34px; font-size: 10px; } .v2-source-evidence-body { padding: 10px; } .v2-source-evidence-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; } .v2-source-evidence-toolbar label { font-size: 10px; } .v2-source-evidence-toolbar input { height: 34px; font-size: 11px; } .v2-source-evidence-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-source-evidence-summary > div:nth-child(3) { border-left: 0; } .v2-source-evidence-summary > div:nth-child(n+3) { border-top: 1px solid #e2e8f0; } .v2-source-evidence-summary strong { font-size: 15px; } .v2-source-evidence-group > div { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .v2-source-evidence-card { min-width: min(82vw,300px); flex: 0 0 min(82vw,300px); scroll-snap-align: start; } .v2-source-evidence-card > .semi-card-body > header strong { font-size: 11px; } .v2-source-evidence-card dd { font-size: 10px; } } /* Semi UI production migration: shared page hierarchy and component normalization. */ .v2-page-heading { display: flex; min-height: 66px; flex: 0 0 auto; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 2px 2px 4px; } .v2-page-heading-copy { display: flex; min-width: 0; flex-direction: column; gap: 6px; } .v2-page-heading-copy > div { display: flex; min-width: 0; align-items: center; gap: 10px; } .v2-page-heading-copy h3 { margin: 0; color: #172033; font-size: 25px; font-weight: 720; letter-spacing: -.04em; } .v2-page-heading-copy > .semi-typography { max-width: 760px; font-size: 12px; line-height: 1.6; } .v2-page-heading-copy .semi-tag { flex: 0 0 auto; border-radius: 999px; font-weight: 650; } .v2-page-heading-aside { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding-bottom: 2px; } .v2-page-heading-aside > .semi-typography { font-size: 11px; } .v2-mileage-query-panel, .v2-mileage-results { border-color: var(--v2-border); box-shadow: var(--v2-shadow); } .v2-mileage-filter > .semi-button-primary { height: 42px; margin-top: 18px; border-radius: 8px; padding: 0 24px; font-size: 12px; font-weight: 700; box-shadow: 0 7px 16px rgba(18,104,243,.16); } .v2-mileage-source-trigger.semi-button { height: 42px; border: 1px solid #d7e0ea; background: #fff; color: #56657a; box-shadow: none; } .v2-mileage-source-trigger.semi-button:hover, .v2-mileage-source-trigger.semi-button[aria-expanded="true"] { border-color: #a8bad2; background: #f8fafc; } .v2-mileage-source-switch.semi-switch { width: 32px; height: 18px; min-width: 32px; border: 0; background: transparent; } .v2-mileage-source-list article > p .semi-button { width: 28px; min-width: 28px; height: 28px; border: 1px solid #dce4ee; border-radius: 6px; background: #fff; color: #65758b; padding: 0; } .v2-mileage-ranges .semi-button { height: 34px; border: 0; border-radius: 6px; padding: 0 9px; font-size: 11px; font-weight: 650; box-shadow: none; } .v2-mileage-ranges .semi-button-light { background: transparent; color: #64748b; } .v2-mileage-ranges .semi-button-solid { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 4px rgba(20,44,78,.12); } .v2-mileage-result-actions > .semi-button { height: 34px; border-radius: 8px; padding: 0 12px; font-size: 11px; font-weight: 650; } .v2-mileage-results > .semi-card-body > footer .semi-button { height: 30px; border-radius: 7px; font-size: 10px; } @media (max-width: 900px) { .v2-page-heading { min-height: 58px; align-items: center; } .v2-page-heading-copy h3 { font-size: 22px; } } @media (max-width: 680px) { .v2-auth-card { padding: 0; } .v2-auth-form { padding: 30px 22px; } .v2-auth-form label .semi-input-wrapper, .v2-auth-form > .semi-button-primary { height: 46px; } .v2-page-heading { min-height: 48px; align-items: center; gap: 10px; padding: 2px 3px; } .v2-page-heading-copy { gap: 0; } .v2-page-heading-copy h3 { font-size: 18px; letter-spacing: -.025em; } .v2-page-heading-copy > .semi-typography { display: none; } .v2-page-heading-copy .semi-tag { max-width: 120px; } .v2-page-heading-aside { gap: 5px; padding: 0; } .v2-page-heading-aside > .semi-typography { display: none; } .v2-page-heading-aside > .semi-button { height: 34px; border-radius: 8px; padding: 0 10px; } .v2-mileage-page > .v2-page-heading { display: none; } .v2-mileage-filter > .semi-button-primary { width: 100%; margin-top: 0; } .v2-mileage-source-strategy { margin-top: 0; } .v2-mileage-source-trigger.semi-button { width: 100%; justify-content: center; } .v2-mileage-ranges .semi-button { height: 36px; padding: 0 3px; font-size: 10px; } .v2-mileage-result-actions > .semi-button { height: 32px; padding: 0 9px; font-size: 10px; } } /* Semi UI second migration: core business pages share one visual grammar. */ .v2-page-state > header > div { display: flex; flex-direction: column; gap: 3px; } .v2-page-state > header .semi-spin { flex: 0 0 auto; } .v2-inline-state .semi-empty { padding: 12px 0; } .v2-inline-state .semi-empty-image { display: none; } .v2-inline-state .semi-empty-title { color: var(--v2-muted); font-size: 12px; } .v2-inline-state.is-error > .semi-button { height: 30px; margin-left: auto; border-radius: 7px; padding: 0 10px; color: #b42318; } .v2-vehicle-search-card.semi-card { overflow: visible; border-color: rgba(218,226,237,.96); background: rgba(255,255,255,.98); padding: 0; box-shadow: 0 24px 64px rgba(25,45,74,.09); } .v2-vehicle-search-card > .semi-card-body { padding: 46px 48px; } .v2-vehicle-search-card > .semi-card-body > h2 { margin: 0; color: #172033; font-size: 27px; letter-spacing: -.045em; } .v2-vehicle-search-card > .semi-card-body > .semi-typography { display: block; max-width: 520px; margin: 12px auto 27px; font-size: 13px; line-height: 1.75; } .v2-vehicle-search-card form { height: 58px; gap: 8px; border: 1px solid #d9e2ed; border-radius: 12px; background: #f8fafc; padding: 6px; box-shadow: none; } .v2-vehicle-search-card form:focus-within { border-color: #86aff0; background: #fff; box-shadow: 0 0 0 4px rgba(18,104,243,.08); } .v2-vehicle-search-card form .semi-input-wrapper { min-width: 0; height: 44px; flex: 1; border: 0; background: transparent; box-shadow: none; } .v2-vehicle-search-card form .semi-input { font-size: 14px; } .v2-vehicle-search-card form > .semi-button { height: 44px; flex: 0 0 auto; border-radius: 9px; padding: 0 19px; font-size: 13px; box-shadow: 0 7px 16px rgba(18,104,243,.17); } .v2-vehicle-search-card .v2-profile-sync-open.semi-button { height: 34px; margin-top: 17px; border: 0; background: transparent; color: var(--v2-blue); box-shadow: none; } .v2-identity-primary > .semi-tag.v2-online-label { display: inline-flex; height: 24px; align-items: center; border-radius: 999px; padding: 0 9px; } .v2-identity-primary > .semi-button { width: 28px; min-width: 28px; height: 28px; border-radius: 7px; color: #78869a; } :is(.v2-history-toolbar,.v2-alert-filter,.v2-access-filter-v3) > .semi-button { height: 38px; border-radius: 8px; padding: 0 16px; font-size: 12px; font-weight: 700; } :is(.v2-history-toolbar,.v2-alert-filter,.v2-access-filter-v3) > .semi-button-primary.semi-button-solid { box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-history-metrics .v2-history-metrics-manage.semi-button { height: 30px; margin-left: auto; border-radius: 7px; color: var(--v2-blue); font-size: 10px; } .v2-history-table-card > .semi-card-body > header .semi-button, .v2-alert-table-card > .semi-card-body > header .semi-button, .v2-access-table-actions > .semi-button { height: 32px; border-radius: 7px; padding: 0 10px; font-size: 10px; } .v2-access-table-v3 > .semi-card-body > footer .semi-button, .v2-alert-table-card > .semi-card-body > footer .semi-button, .v2-history-table-card > .semi-card-body > footer .semi-button { height: 30px; border-radius: 7px; padding: 0 12px; font-size: 10px; } .v2-alert-tabs > .semi-button { height: 42px; border-radius: 0; padding: 0 7px; color: #667085; font-size: 12px; font-weight: 650; } .v2-alert-tabs > .semi-button.is-active { background: transparent; color: var(--v2-blue); } .v2-alert-actions > .semi-button { min-width: 0; height: 34px; flex: 1; border-radius: 8px; font-size: 11px; } .v2-track-query-header .v2-workspace-panel-actions > .semi-button { width: 30px; min-width: 30px; height: 30px; border-radius: 7px; padding: 0; } .v2-track-presets > .semi-button { height: 30px; flex: 1; border-radius: 7px; font-size: 11px; } .v2-track-query > .v2-track-query-button.semi-button { height: 40px; border-radius: 8px; font-size: 13px; } .v2-track-rail-tabs > .semi-button { width: 100%; min-width: 0; height: 38px; border-radius: 0; padding: 0 8px; font-size: 10px; } .v2-track-stage-tools > .semi-button { height: 38px; border: 1px solid rgba(215,224,235,.95); border-radius: 9px; background: rgba(255,255,255,.94); color: #5f6f84; box-shadow: 0 8px 24px rgba(26,42,63,.11); backdrop-filter: blur(12px); } .v2-track-stage-tools > .semi-button.is-active { border-color: #aac6f1; background: #edf4ff; color: var(--v2-blue); } .v2-track-empty-state > .semi-card-body > .semi-button { height: 38px; border-radius: 8px; padding: 0 16px; } .v2-track-dock-controls > .semi-button { width: 32px; min-width: 32px; height: 32px; border-radius: 8px; padding: 0; } .v2-track-dock-controls > .semi-button.is-primary { width: 38px; min-width: 38px; height: 38px; box-shadow: 0 6px 14px rgba(18,104,243,.2); } @media (max-width: 680px) { .v2-vehicle-search-card > .semi-card-body { padding: 30px 18px; } .v2-vehicle-search-card > .semi-card-body > h2 { font-size: 22px; } .v2-vehicle-search-card form { height: auto; flex-wrap: wrap; padding: 7px; } .v2-vehicle-search-card form .semi-input-wrapper { width: 100%; flex-basis: 100%; } .v2-vehicle-search-card form > .semi-button { width: 100%; justify-content: center; } :is(.v2-history-toolbar,.v2-alert-filter,.v2-access-filter-v3) > .semi-button { width: 100%; height: 42px; } .v2-track-stage-tools > .semi-button { width: 40px; min-width: 40px; height: 40px; padding: 0; } .v2-track-stage-tools > .semi-button .semi-button-content { display: inline-flex; font-size: 0; } .v2-track-stage-tools > .semi-button .semi-button-content > .semi-icon { font-size: 17px; } } /* Semi UI third migration: account administration and operations workspace. */ .v2-user-admin { display: flex; flex-direction: column; } .v2-user-admin > .v2-page-heading { width: 100%; max-width: 1480px; margin: 0 auto 18px; } .v2-user-admin-grid { width: 100%; } .v2-user-editor form > footer .semi-button, .v2-user-editor-empty > .semi-button { height: 38px; border-radius: 8px; padding: 0 17px; font-size: 12px; font-weight: 700; box-shadow: 0 7px 16px rgba(18,104,243,.16); } .v2-user-status .semi-switch { width: 32px; min-width: 32px; height: 18px; border: 0; } .v2-user-fields .semi-input-wrapper, .v2-vehicle-permission-tools .semi-input-wrapper { width: 100%; height: 38px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; box-shadow: none; } .v2-user-fields .semi-input-wrapper:hover, .v2-vehicle-permission-tools .semi-input-wrapper:hover { border-color: #b9c8da; } .v2-user-fields .semi-input-wrapper-focus, .v2-vehicle-permission-tools .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-user-fields .semi-input-wrapper-disabled { background: #f5f7fa; } .v2-user-fields .semi-input, .v2-vehicle-permission-tools .semi-input { height: 36px; border: 0; padding: 0 10px; color: #273750; font-size: 12px; } .v2-menu-permissions .semi-checkbox { margin-top: 1px; flex: 0 0 auto; } .v2-menu-permissions .semi-checkbox-inner { border-radius: 4px; } .v2-vehicle-permission-heading > .semi-button { height: 28px; border-radius: 6px; color: #7d899a; font-size: 10px; } .v2-bulk-vin > .semi-input-wrapper { min-width: 0; flex: 1; } .v2-bulk-vin > .semi-button { height: 38px; flex: 0 0 auto; border-radius: 7px; padding: 0 12px; font-size: 10px; } .v2-assigned-vins > article { content-visibility: auto; contain-intrinsic-size: auto 106px; } .v2-assigned-vins article > header .semi-button { width: 24px; min-width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; padding: 0; color: #99a4b3; font-size: 15px; } .v2-assigned-vins article > header .semi-button:hover { background: #eef2f7; color: var(--v2-red); } .v2-ops-page > .v2-page-heading { margin-bottom: 2px; } .v2-ops-page > .v2-page-heading .semi-button { height: 36px; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; color: #526176; padding: 0 13px; font-size: 11px; } .v2-ops-kpis { gap: 10px; } .v2-ops-kpi-card.semi-card { border-color: #dce4ee; box-shadow: 0 8px 28px rgba(31,53,80,.055); } .v2-ops-kpi-card > .semi-card-body { padding: 15px 16px !important; } .v2-ops-kpis small { font-size: 10px; } .v2-ops-kpis strong { margin: 7px 0 5px; font-size: 18px; letter-spacing: -.02em; } .v2-ops-kpis span { font-size: 9px; } .v2-ops-panel.semi-card { border-color: #dce4ee; box-shadow: 0 8px 28px rgba(31,53,80,.055); } .v2-ops-links article { min-height: 52px; padding: 8px 15px; } .v2-ops-links article strong { font-size: 10px; } .v2-ops-links article p { font-size: 9px; } .v2-ops-runtime dl div { min-height: 35px; font-size: 10px; } .v2-ops-sources article { padding: 14px 16px; } .v2-ops-sources article strong { font-size: 11px; } .v2-ops-sources article b { font-size: 16px; } .v2-ops-sources article p, .v2-ops-sources article em { font-size: 9px; } .v2-source-diagnostic.semi-card { border-color: #d6e1ed; box-shadow: 0 10px 30px rgba(31,53,80,.065); } .v2-source-search > .semi-button { height: 36px; border-radius: 8px; padding: 0 13px; font-size: 11px; } .v2-source-search { padding: 13px 16px; } .v2-source-search > label { height: 38px; border-radius: 8px; padding: 0 12px; } .v2-source-search input { font-size: 12px; } .v2-source-search > .semi-button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-source-candidates { top: 54px; right: 132px; left: 16px; } .v2-source-candidates footer .semi-button { height: 27px; border-radius: 6px; padding: 0 9px; font-size: 9px; } .v2-source-policy-cell > .semi-button { grid-column: 1 / -1; height: 29px; border-radius: 6px; font-size: 9px; } @media (max-width: 900px) { .v2-user-admin > .v2-page-heading { margin-bottom: 12px; } .v2-ops-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } .v2-ops-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .v2-user-admin > .v2-page-heading { margin-bottom: 8px; } .v2-user-admin > .v2-page-heading .semi-tag { display: none; } .v2-user-editor-title { align-items: center; } .v2-user-fields .semi-input-wrapper, .v2-vehicle-permission-tools .semi-input-wrapper, .v2-bulk-vin > .semi-button { height: 42px; } .v2-user-fields .semi-input, .v2-vehicle-permission-tools .semi-input { height: 40px; font-size: 13px; } .v2-user-editor form > footer .semi-button { width: 100%; height: 44px; justify-content: center; } .v2-ops-page { gap: 8px; padding: 8px 8px 18px; } .v2-ops-page > .v2-page-heading .semi-tag { display: none; } .v2-ops-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .v2-ops-kpi-card > .semi-card-body { min-height: 96px; padding: 12px !important; } .v2-ops-sources > .semi-card-body > div { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } .v2-ops-sources article { min-width: min(82vw,320px); flex: 0 0 min(82vw,320px); scroll-snap-align: start; } .v2-source-search > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-source-candidates { top: 64px; right: 14px; left: 14px; } } /* Semi UI fourth migration: reconciliation and vehicle profile maintenance. */ .v2-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; } .v2-reconcile-heading > .semi-button { height: 36px; flex: 0 0 auto; border: 1px solid #c5d4e5; border-radius: 8px; background: #fff; color: #355272; padding: 0 13px; font-size: 11px; } .v2-reconcile-toolbar > .semi-input-wrapper, .v2-reconcile-toolbar > .semi-select { width: 100%; min-width: 0; height: 38px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; box-shadow: none; } .v2-reconcile-toolbar > .semi-input-wrapper:hover, .v2-reconcile-toolbar > .semi-select:hover { border-color: #b8c7da; } .v2-reconcile-toolbar > .semi-input-wrapper-focus, .v2-reconcile-toolbar > .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-reconcile-toolbar .semi-input, .v2-reconcile-toolbar .semi-select-selection-text { color: #33465c; font-size: 11px; } .v2-reconcile-search.semi-input-wrapper { padding: 0 11px; } .v2-reconcile-search.semi-input-wrapper .semi-input { padding: 0 0 0 7px; } .v2-reconcile-pagination .semi-button { height: 30px; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; color: #405870; padding: 0 11px; font-size: 11px; } .v2-reconcile-detail > .semi-card-body > header > .semi-button { width: 30px; min-width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; padding: 0; color: #6f8093; } .v2-reconcile-review > .semi-card-body > label > .semi-radioGroup, .v2-reconcile-review > .semi-card-body > label > .semi-input-textarea-wrapper { width: 100%; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; box-shadow: none; } .v2-reconcile-review > .semi-card-body > label > .semi-radioGroup { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; border: 0; } .v2-reconcile-review .semi-radio-addon-buttonRadio { min-width: 0; height: 32px; border-radius: 6px; padding: 0 7px; font-size: 9px; } .v2-reconcile-review .semi-input-textarea { color: #30465d; font-size: 11px; } .v2-reconcile-review .semi-input-textarea-counter { padding: 0 8px 5px; color: #8a97a8; font-size: 9px; } .v2-reconcile-review > .semi-card-body > .semi-button { height: 34px; margin: 3px 11px 0; border-radius: 7px; padding: 0 14px; font-size: 11px; box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-profile-sync-panel { border-color: #d9e3ef; box-shadow: 0 16px 44px rgba(25,45,74,.09); } .v2-profile-sync-panel > header > .semi-button { height: 30px; border-radius: 7px; padding: 0 10px; color: #6e7e92; font-size: 10px; } .v2-profile-sync-fields .semi-input-wrapper, .v2-profile-sync-fields .semi-select { width: 100%; min-width: 0; height: 36px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; box-shadow: none; } .v2-profile-sync-fields .semi-input-wrapper:hover, .v2-profile-sync-fields .semi-select:hover { border-color: #b9c8da; } .v2-profile-sync-fields .semi-input-wrapper-focus, .v2-profile-sync-fields .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-profile-sync-fields .semi-input, .v2-profile-sync-fields .semi-select-selection-text { height: 34px; color: #273750; font-size: 11px; } .v2-profile-sync-fields input[type="file"] { height: 36px; border-color: #dbe3ed; border-radius: 7px; padding: 7px 8px; font-size: 9px; } .v2-profile-sync-panel > footer .semi-button { height: 34px; border-radius: 7px; padding: 0 14px; font-size: 10px; font-weight: 650; } .v2-profile-sync-panel > footer .semi-button-primary.semi-button-solid { box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-profile-form .semi-input-wrapper, .v2-profile-form .semi-select { width: 100%; min-width: 0; height: 31px; border: 1px solid var(--v2-border); border-radius: 6px; background: #fff; box-shadow: none; } .v2-profile-form .semi-input-wrapper-focus, .v2-profile-form .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.06); } .v2-profile-form .semi-input, .v2-profile-form .semi-select-selection-text { height: 29px; color: var(--v2-text); font-size: 9px; } .v2-profile-form footer .semi-button { height: 29px; border-radius: 6px; padding: 0 11px; font-size: 9px; } @media (max-width: 680px) { .v2-reconcile-heading { align-items: flex-start; flex-direction: column; } .v2-reconcile-heading > .semi-button { width: 100%; height: 40px; justify-content: center; } .v2-reconcile-toolbar { grid-template-columns: 1fr; } .v2-reconcile-toolbar > .semi-input-wrapper, .v2-reconcile-toolbar > .semi-select { height: 42px; } .v2-reconcile-toolbar .semi-input, .v2-reconcile-toolbar .semi-select-selection-text { font-size: 12px; } .v2-reconcile-pagination { align-items: flex-start; flex-direction: column; gap: 7px; } .v2-reconcile-pagination div { width: 100%; } .v2-reconcile-pagination .semi-button { height: 36px; flex: 1; } .v2-reconcile-detail.semi-card { width: 100%; } .v2-reconcile-review > .semi-card-body > label > .semi-radioGroup { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-reconcile-review .semi-radio-addon-buttonRadio { height: 36px; font-size: 10px; } .v2-reconcile-review > .semi-card-body > .semi-button { width: calc(100% - 22px); height: 40px; justify-content: center; } .v2-profile-sync-fields .semi-input-wrapper, .v2-profile-sync-fields .semi-select, .v2-profile-sync-fields input[type="file"] { height: 42px; } .v2-profile-sync-fields .semi-input, .v2-profile-sync-fields .semi-select-selection-text { height: 40px; font-size: 12px; } .v2-profile-sync-panel > footer .semi-button { height: 40px; flex: 1; } } /* Semi UI fifth migration: history, alerts and shared source evidence. */ .v2-history-toolbar label > .semi-input-wrapper, .v2-history-toolbar label > .semi-select, .v2-alert-filter label > .semi-input-wrapper, .v2-alert-filter label > .semi-select { width: 100%; min-width: 0; height: 38px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; padding: 0; box-shadow: none; } .v2-history-toolbar label > .semi-input-wrapper:hover, .v2-history-toolbar label > .semi-select:hover, .v2-alert-filter label > .semi-input-wrapper:hover, .v2-alert-filter label > .semi-select:hover { border-color: #b8c7da; } .v2-history-toolbar label > .semi-input-wrapper-focus, .v2-history-toolbar label > .semi-select-focus, .v2-alert-filter label > .semi-input-wrapper-focus, .v2-alert-filter label > .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-history-toolbar .semi-input, .v2-history-toolbar .semi-select-selection-text, .v2-alert-filter .semi-input, .v2-alert-filter .semi-select-selection-text { height: 36px; color: #33465c; font-size: 12px; } .v2-history-vehicles > .semi-input-wrapper, .v2-alert-filter label:first-child > .semi-input-wrapper { padding: 0 10px; } .v2-history-vehicles > .semi-input-wrapper .semi-input, .v2-alert-filter label:first-child > .semi-input-wrapper .semi-input { padding-left: 7px; } .v2-history-range > div { height: 38px; } .v2-history-range > div > .semi-input-wrapper { width: 100%; min-width: 0; height: 36px; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; } .v2-history-range > div > .semi-input-wrapper .semi-input { width: 100%; height: 36px; border: 0; padding: 0 8px; font-size: 11px; } .v2-history-table-card > .semi-card-body > header .semi-select, .v2-history-table-card > .semi-card-body > footer .semi-select, .v2-alert-table-card > .semi-card-body > footer .semi-select { min-width: 92px; height: 30px; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; box-shadow: none; } .v2-history-table-card > .semi-card-body > header .semi-select-selection-text, .v2-history-table-card > .semi-card-body > footer .semi-select-selection-text, .v2-alert-table-card > .semi-card-body > footer .semi-select-selection-text { color: #405870; font-size: 10px; } .v2-alert-inspector .semi-input-textarea-wrapper { width: 100%; min-height: 64px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; box-shadow: none; } .v2-alert-inspector .semi-input-textarea-wrapper:hover { border-color: #b8c7da; } .v2-alert-inspector .semi-input-textarea-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-alert-inspector .semi-input-textarea { min-height: 44px; color: #405168; font-size: 11px; line-height: 1.55; } .v2-alert-inspector .semi-input-textarea-counter { padding: 0 8px 5px; color: #8d99aa; font-size: 9px; } .v2-source-evidence-trigger > .semi-button { height: 32px; flex: 0 0 auto; border-radius: 7px; padding: 0 11px; color: var(--v2-blue); font-size: 9px; font-weight: 700; } .v2-source-evidence-toolbar label > .semi-input-wrapper { width: 144px; height: 32px; border: 1px solid #d8e2ee; border-radius: 7px; background: #fff; box-shadow: none; } .v2-source-evidence-toolbar label > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-source-evidence-toolbar label .semi-input { height: 30px; border: 0; padding: 0 9px; color: #344257; font-size: 10px; } .v2-source-evidence-state > .semi-button { height: 28px; border-radius: 6px; padding: 0 9px; font-size: 9px; } @media (max-width: 680px) { .v2-history-toolbar label > .semi-input-wrapper, .v2-history-toolbar label > .semi-select, .v2-alert-filter label > .semi-input-wrapper, .v2-alert-filter label > .semi-select, .v2-history-range > div { height: 42px; } .v2-history-toolbar .semi-input, .v2-history-toolbar .semi-select-selection-text, .v2-alert-filter .semi-input, .v2-alert-filter .semi-select-selection-text, .v2-history-range > div > .semi-input-wrapper, .v2-history-range > div > .semi-input-wrapper .semi-input { height: 40px; font-size: 12px; } .v2-alert-inspector .semi-input-textarea { font-size: 12px; } .v2-source-evidence-trigger > .semi-button { height: 36px; font-size: 10px; } .v2-source-evidence-toolbar label { width: 100%; } .v2-source-evidence-toolbar label > .semi-input-wrapper { width: 100%; height: 38px; } .v2-source-evidence-toolbar label .semi-input { height: 36px; font-size: 11px; } } /* Semi UI sixth migration: alert rule authoring and notification operations. */ .v2-alert-rules { grid-template-columns: minmax(280px,320px) minmax(620px,1fr); gap: 10px; } .v2-alert-rule-list, .v2-alert-rule-editor, .v2-alert-notifications { border-color: #dbe3ed; box-shadow: 0 10px 30px rgba(31,53,80,.06); } .v2-alert-rule-list > header, .v2-alert-rule-editor > header { min-height: 52px; padding: 0 15px; } .v2-alert-rule-list > header strong, .v2-alert-rule-editor > header strong { color: #26364c; font-size: 13px; } .v2-alert-rule-list > header > .semi-button, .v2-alert-rule-editor > header > .semi-button { height: 32px; border-radius: 7px; padding: 0 11px; color: var(--v2-blue); font-size: 10px; font-weight: 650; } .v2-alert-rule-list > button { min-height: 66px; padding: 10px 14px; content-visibility: auto; contain-intrinsic-size: auto 66px; } .v2-alert-rule-list > button strong { color: #34455c; font-size: 11px; } .v2-alert-rule-list > button small { font-size: 9px; } .v2-alert-rule-list > button em { font-size: 9px; } .v2-alert-rule-editor > header div { gap: 4px; } .v2-alert-rule-editor > header span { font-size: 10px; } .v2-alert-rule-templates { grid-template-columns: 180px minmax(0,1fr); gap: 16px; background: linear-gradient(135deg,#f8fbff 0%,#f3f7fc 100%); padding: 14px 16px; } .v2-alert-rule-templates > div strong { font-size: 12px; } .v2-alert-rule-templates > div span { font-size: 9px; } .v2-alert-rule-templates button { min-height: 58px; border-color: #d8e3f0; border-radius: 9px; padding: 10px 12px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-alert-rule-templates button:hover { border-color: #9bbcf0; box-shadow: 0 7px 18px rgba(37,99,235,.09); transform: translateY(-1px); } .v2-alert-rule-templates button b { font-size: 11px; } .v2-alert-rule-templates button small { font-size: 9px; } .v2-rule-form-grid { gap: 13px 16px; padding: 18px 16px 20px; } .v2-rule-form-grid label { gap: 7px; color: #5d6d81; font-size: 10px; font-weight: 650; } .v2-rule-form-grid label > .semi-input-wrapper, .v2-rule-form-grid label > .semi-select, .v2-rule-form-grid label > .semi-input-textarea-wrapper { width: 100%; min-width: 0; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; box-shadow: none; } .v2-rule-form-grid label > .semi-input-wrapper, .v2-rule-form-grid label > .semi-select { height: 38px; } .v2-rule-form-grid label > .semi-input-wrapper:hover, .v2-rule-form-grid label > .semi-select:hover, .v2-rule-form-grid label > .semi-input-textarea-wrapper:hover { border-color: #b8c7da; } .v2-rule-form-grid label > .semi-input-wrapper-focus, .v2-rule-form-grid label > .semi-select-focus, .v2-rule-form-grid label > .semi-input-textarea-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-rule-form-grid .semi-input, .v2-rule-form-grid .semi-select-selection-text { height: 36px; border: 0; padding: 0 11px; color: #33465c; font-size: 11px; font-weight: 400; } .v2-rule-form-grid .semi-input-textarea { min-height: 68px; border: 0; padding: 9px 11px; color: #33465c; font-size: 11px; font-weight: 400; line-height: 1.55; } .v2-rule-form-grid .semi-input-textarea-counter { padding: 0 9px 6px; color: #8d99aa; font-size: 9px; } .v2-rule-form-grid .semi-input-wrapper-disabled, .v2-rule-form-grid .semi-select-disabled { background: #f5f7fa; } .v2-alert-rule-editor > footer { min-height: 58px; padding: 10px 16px; } .v2-alert-rule-editor > footer b { color: #34455c; font-size: 10px; } .v2-alert-rule-editor > footer span { font-size: 9px; } .v2-alert-rule-editor > footer > .semi-button { height: 38px; flex: 0 0 auto; border-radius: 8px; padding: 0 18px; font-size: 11px; font-weight: 700; box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-alert-notifications > div { max-height: calc(100% - 134px); } .v2-alert-notifications article { min-height: 72px; gap: 12px; padding: 11px 16px; content-visibility: auto; contain-intrinsic-size: auto 72px; } .v2-alert-notifications article strong { color: #34455c; font-size: 12px; } .v2-alert-notifications article p { margin: 5px 0; font-size: 10px; line-height: 1.55; } .v2-alert-notifications article span { font-size: 9px; } .v2-alert-notifications article > .semi-button { height: 30px; border-radius: 7px; padding: 0 10px; color: var(--v2-blue); font-size: 9px; } .v2-alert-notifications > footer { min-height: 48px; align-items: center; flex-wrap: wrap; gap: 7px 18px; padding: 10px 16px; font-size: 9px; } @media (max-width: 1100px) { .v2-alert-rules { grid-template-columns: minmax(250px,290px) minmax(540px,1fr); } } @media (max-width: 900px) { .v2-alert-rules { grid-template-columns: 1fr; overflow: auto; } .v2-alert-rule-list { max-height: 300px; } .v2-alert-rule-editor { overflow: visible; } } @media (max-width: 680px) { .v2-alert-rule-list > header, .v2-alert-rule-editor > header { min-height: 56px; padding: 8px 12px; } .v2-alert-rule-list > header > .semi-button, .v2-alert-rule-editor > header > .semi-button { height: 36px; } .v2-alert-rule-list { max-height: 252px; } .v2-alert-rule-templates { grid-template-columns: 1fr; padding: 12px; } .v2-alert-rule-templates nav { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } .v2-alert-rule-templates button { min-width: min(78vw,300px); flex: 0 0 min(78vw,300px); scroll-snap-align: start; } .v2-rule-form-grid { gap: 12px; padding: 14px 12px 16px; } .v2-rule-form-grid label > .semi-input-wrapper, .v2-rule-form-grid label > .semi-select { height: 42px; } .v2-rule-form-grid .semi-input, .v2-rule-form-grid .semi-select-selection-text { height: 40px; font-size: 12px; } .v2-rule-form-grid .semi-input-textarea { font-size: 12px; } .v2-alert-rule-editor > footer { align-items: stretch; flex-direction: column; padding: 12px; } .v2-alert-rule-editor > footer > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-alert-notifications article { grid-template-columns: 8px minmax(0,1fr); padding: 11px 12px; } .v2-alert-notifications article > .semi-button { grid-column: 2; justify-self: start; } .v2-alert-notifications > footer { align-items: flex-start; flex-direction: column; gap: 6px; } } /* Semi UI seventh migration: access management and source diagnostics. */ .v2-access-filter-v3 label > .semi-input-wrapper, .v2-access-filter-v3 label > .semi-select { width: 100%; min-width: 0; height: 38px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; padding: 0; box-shadow: none; } .v2-access-filter-v3 label > .semi-input-wrapper:hover, .v2-access-filter-v3 label > .semi-select:hover { border-color: #b8c7da; } .v2-access-filter-v3 label > .semi-input-wrapper-focus, .v2-access-filter-v3 label > .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-access-filter-v3 .is-search > .semi-input-wrapper { padding: 0 10px; } .v2-access-filter-v3 .is-search > .semi-input-wrapper .semi-input { padding-left: 7px; } .v2-access-filter-v3 .semi-input, .v2-access-filter-v3 .semi-select-selection-text { height: 36px; color: #35475d; font-size: 12px; } .v2-access-table-v3 > .semi-card-body > footer .semi-select { min-width: 100px; height: 30px; border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; box-shadow: none; } .v2-access-table-v3 > .semi-card-body > footer .semi-select-selection-text { color: #405870; font-size: 10px; } .v2-access-settings fieldset label > .semi-input-wrapper { width: 100%; min-width: 0; height: 36px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; box-shadow: none; } .v2-access-settings fieldset label > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-access-settings fieldset label .semi-input { height: 34px; color: #35475d; font-size: 11px; } .v2-access-settings fieldset > .semi-button { height: 36px; align-self: end; border-radius: 7px; padding: 0 13px; font-size: 10px; box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-source-search > .semi-input-wrapper { min-width: 280px; height: 38px; flex: 1; border: 1px solid #d4deea; border-radius: 8px; background: #fff; padding: 0 11px; box-shadow: none; } .v2-source-search > .semi-input-wrapper:hover { border-color: #b8c7da; } .v2-source-search > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-source-search > .semi-input-wrapper .semi-input { height: 36px; border: 0; padding: 0 0 0 7px; color: #35475d; font-size: 12px; } .v2-source-policy-cell > .semi-checkbox { align-self: center; margin: 0; color: #4e6076; font-size: 9px; } .v2-source-policy-cell > .semi-checkbox .semi-checkbox-inner { border-radius: 4px; } .v2-source-policy-cell > .semi-input-wrapper { width: 100%; min-width: 0; height: 28px; border: 1px solid #ccd7e5; border-radius: 6px; background: #fff; box-shadow: none; } .v2-source-policy-cell > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.06); } .v2-source-policy-cell > .semi-input-wrapper .semi-input { height: 26px; border: 0; padding: 0 7px; color: #405168; font-size: 9px; } .v2-source-policy-cell > .semi-input-wrapper.v2-source-provider-input, .v2-source-policy-cell > .semi-input-wrapper.v2-source-provider-evidence-input, .v2-source-policy-cell > .semi-input-wrapper.v2-source-policy-remark-input { grid-column: 1 / -1; } .v2-source-policy-cell > .semi-button { margin-top: 1px; } @media (max-width: 680px) { .v2-access-filter-v3 label > .semi-input-wrapper, .v2-access-filter-v3 label > .semi-select { height: 42px; } .v2-access-filter-v3 .semi-input, .v2-access-filter-v3 .semi-select-selection-text { height: 40px; font-size: 13px; } .v2-access-settings fieldset label > .semi-input-wrapper { height: 42px; } .v2-access-settings fieldset label .semi-input { height: 40px; font-size: 12px; } .v2-access-settings fieldset > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-source-search > .semi-input-wrapper { width: 100%; min-width: 0; height: 42px; } .v2-source-search > .semi-input-wrapper .semi-input { height: 40px; font-size: 13px; } } /* Semi UI eighth migration: track query and playback controls. */ .v2-track-vehicle-picker { display: flex; height: 40px; gap: 4px; border: 0; background: transparent; padding: 0; } .v2-track-vehicle-picker:focus-within { border: 0; box-shadow: none; } .v2-track-vehicle-picker > .semi-input-wrapper { width: 100%; min-width: 0; height: 40px; flex: 1; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; padding: 0 10px; box-shadow: none; } .v2-track-vehicle-picker > .semi-input-wrapper:hover { border-color: #b8c7da; } .v2-track-vehicle-picker > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-track-vehicle-picker > .semi-input-wrapper .semi-input { height: 38px; border: 0; padding: 0 0 0 7px; color: #334155; font-size: 11px; } .v2-track-vehicle-picker > .v2-track-vehicle-clear.semi-button { width: 30px; min-width: 30px; height: 40px; flex: 0 0 30px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; padding: 0; } .v2-track-date-grid label > .semi-input-wrapper, .v2-track-query > label > .semi-select { width: 100%; min-width: 0; height: 39px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; box-shadow: none; } .v2-track-date-grid label > .semi-input-wrapper:hover, .v2-track-query > label > .semi-select:hover { border-color: #b8c7da; } .v2-track-date-grid label > .semi-input-wrapper-focus, .v2-track-query > label > .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-track-date-grid .semi-input, .v2-track-query > label > .semi-select .semi-select-selection-text { height: 37px; color: #405168; font-size: 11px; } .v2-track-query > label > .semi-select { margin-bottom: 9px; } .v2-track-dock-controls label > .semi-select { min-width: 66px; height: 28px; border: 0; border-radius: 14px; background: transparent; box-shadow: none; } .v2-track-dock-controls label > .semi-select .semi-select-selection-text { color: #3f4e63; font-size: 10px; font-weight: 700; } @media (max-width: 700px) { .v2-track-vehicle-picker, .v2-track-vehicle-picker > .semi-input-wrapper, .v2-track-date-grid label > .semi-input-wrapper, .v2-track-query > label > .semi-select { height: 42px; } .v2-track-vehicle-picker > .semi-input-wrapper .semi-input, .v2-track-date-grid .semi-input, .v2-track-query > label > .semi-select .semi-select-selection-text { height: 40px; font-size: 16px; } .v2-track-vehicle-picker > button { height: 42px; } .v2-track-dock-controls label > .semi-select { min-width: 62px; } } /* Semi UI ninth migration: monitor filters, batch search and list pagination. */ .v2-search-field { position: relative; height: 36px; min-width: 0; border: 0; border-radius: 8px; padding: 0; box-shadow: none; } .v2-search-field:focus-within { border: 0; box-shadow: none; } .v2-search-field > .semi-input-wrapper { width: 100%; min-width: 0; height: 36px; flex: 1; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; padding: 0 5px 0 10px; box-shadow: none; } .v2-search-field > .semi-input-wrapper:hover { border-color: #b8c7da; } .v2-search-field > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-search-field.is-batch > .semi-input-wrapper { border-color: #9fc0f7; background: #fbfdff; } .v2-search-field > .semi-input-wrapper .semi-input { height: 34px; border: 0; padding-left: 7px; color: #334155; font-size: 12px; } .v2-search-field .v2-search-batch-action.semi-button { height: 26px; margin-left: 3px; border-left: 1px solid #dce4ef; border-radius: 0 6px 6px 0; padding: 0 7px 0 10px; color: var(--v2-blue); font-size: 10px; font-weight: 700; } .v2-search-field > .v2-search-batch-count { margin-left: 1px; } .v2-filterbar > .semi-card-body > .semi-select { width: 100%; min-width: 0; height: 36px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; box-shadow: none; } .v2-filterbar > .semi-card-body > .semi-select:hover { border-color: #b8c7da; } .v2-filterbar > .semi-card-body > .semi-select-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); } .v2-filterbar > .semi-card-body > .semi-select .semi-select-selection-text { height: 34px; color: #4d5c70; font-size: 12px; } .v2-filterbar > .semi-card-body > .v2-filter-reset.semi-button, .v2-filterbar > .semi-card-body > .v2-monitor-mobile-entry.semi-button { height: 36px; border-radius: 8px; font-size: 11px; font-weight: 650; } .v2-filterbar > .semi-card-body > .v2-filter-reset.semi-button { border-color: #d7e0eb; color: #59677c; } .v2-monitor-mode.semi-button-group { display: grid; height: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d7e0eb; border-radius: 8px; background: #f5f7fa; padding: 2px; } .v2-monitor-mode.semi-button-group .semi-button { width: 100%; min-width: 0; height: 30px; border: 0; border-radius: 6px; padding: 0 10px; font-size: 11px; font-weight: 650; box-shadow: none; } .v2-monitor-mode.semi-button-group > .semi-button-group-line { display: none; } .v2-monitor-mode.semi-button-group .semi-button-primary { background: #fff; color: var(--v2-blue); box-shadow: 0 2px 7px rgba(21,32,51,.1); } .v2-monitor-mode.semi-button-group .semi-button.is-active { position: relative; z-index: 1; } .v2-batch-search-modal.semi-modal { overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; box-shadow: 0 28px 80px rgba(13,33,62,.25); } .v2-batch-search-modal .semi-modal-header { margin: 0; border-bottom: 1px solid #edf1f6; padding: 18px 20px 15px; } .v2-batch-search-modal .semi-modal-body { margin: 0; padding: 18px 20px; } .v2-batch-search-modal .semi-modal-footer { margin: 0; border-top: 1px solid #edf1f6; padding: 13px 20px; } .v2-batch-search-title { display: grid; gap: 4px; } .v2-batch-search-title strong { color: #17253a; font-size: 17px; } .v2-batch-search-title span { color: #728096; font-size: 12px; font-weight: 400; } .v2-batch-search-dialog { width: auto; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; } .v2-batch-search-dialog > label { margin-bottom: 9px; } .v2-batch-search-dialog .semi-input-textarea-wrapper { width: 100%; border: 1px solid #ccd8e7; border-radius: 9px; background: #fbfcfe; box-shadow: none; } .v2-batch-search-dialog .semi-input-textarea-wrapper-focus { border-color: #4386df; background: #fff; box-shadow: 0 0 0 3px rgba(45,116,210,.09); } .v2-batch-search-dialog .semi-input-textarea { min-height: 210px; padding: 12px 14px; color: #1d2a3d; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .v2-batch-search-actions { display: flex; justify-content: flex-end; gap: 8px; } .v2-batch-search-actions .semi-button { min-width: 94px; height: 36px; border-radius: 8px; } .v2-monitor-table-panel > .semi-card-body > footer > div { align-items: center; } .v2-monitor-table-panel > .semi-card-body > footer .semi-button { height: 30px; border-radius: 7px; padding: 0 10px; font-size: 10px; } .v2-monitor-table-panel > .semi-card-body > footer .semi-select { width: 96px; height: 30px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; } .v2-monitor-table-panel > .semi-card-body > footer .semi-select-selection-text { height: 28px; font-size: 10px; } @media (max-width: 760px) { .v2-search-field, .v2-search-field > .semi-input-wrapper, .v2-filterbar > .semi-card-body > .semi-select, .v2-filterbar > .semi-card-body > .v2-filter-reset.semi-button, .v2-filterbar > .semi-card-body > .v2-monitor-mobile-entry.semi-button, .v2-monitor-mode.semi-button-group { height: 44px; } .v2-search-field > .semi-input-wrapper .semi-input, .v2-filterbar > .semi-card-body > .semi-select .semi-select-selection-text { height: 42px; font-size: 16px; } .v2-search-field .v2-search-batch-action.semi-button { height: 32px; font-size: 11px; } .v2-monitor-mode.semi-button-group .semi-button { height: 38px; font-size: 12px; } .v2-batch-search-modal.semi-modal { width: calc(100vw - 16px) !important; margin: 8px; border-radius: 16px; } .v2-batch-search-modal .semi-modal-header { padding: 16px 16px 13px; } .v2-batch-search-modal .semi-modal-body { padding: 15px 16px; } .v2-batch-search-modal .semi-modal-footer { padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); } .v2-batch-search-dialog .semi-input-textarea { min-height: 30vh; font-size: 16px; } .v2-batch-search-actions .semi-button { min-width: 0; height: 42px; flex: 1; } .v2-monitor-mobile-cards { gap: 6px; padding: 6px; } .v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card { border-radius: 9px; } .v2-monitor-mobile-card .semi-card-body { padding: 9px 10px; } .v2-monitor-mobile-card .semi-card-body > header strong { font-size: 14px; } .v2-monitor-mobile-card .semi-card-body > header > b { font-size: 16px; } .v2-monitor-mobile-cards dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 8px; padding-top: 8px; } .v2-monitor-mobile-cards dd { margin-top: 2px; } .v2-monitor-mobile-card .semi-card-body > footer { margin-top: 7px; padding-top: 7px; } } /* Semi UI tenth migration: mileage vehicle and date inputs. */ .v2-mileage-selection > .semi-input-wrapper { width: 120px; min-width: 90px; height: 26px; flex: 1; border: 0; border-radius: 5px; background: transparent; padding: 0; box-shadow: none; } .v2-mileage-selection > .semi-input-wrapper .semi-input { height: 26px; border: 0; background: transparent; padding: 0 3px; color: var(--v2-text); font-size: 12px; } .v2-mileage-filter > label > .semi-input-wrapper { width: 100%; height: 40px; border: 1px solid #d7e0ea; border-radius: 8px; background: #fff; box-shadow: none; } .v2-mileage-filter > label > .semi-input-wrapper:hover { border-color: #b8c7da; } .v2-mileage-filter > label > .semi-input-wrapper-focus { border-color: #6d9ff1; box-shadow: 0 0 0 3px rgba(37,99,235,.08); } .v2-mileage-filter > label > .semi-input-wrapper .semi-input { height: 38px; border: 0; padding: 0 11px; color: #253248; font-size: 13px; } @media (max-width: 680px) { .v2-mileage-selection > .semi-input-wrapper, .v2-mileage-selection > .semi-input-wrapper .semi-input { height: 28px; } .v2-mileage-selection > .semi-input-wrapper .semi-input { font-size: 16px; } .v2-mileage-filter > label > .semi-input-wrapper { height: 44px; } .v2-mileage-filter > label > .semi-input-wrapper .semi-input { height: 42px; font-size: 16px; } } /* Semi UI eleventh migration: account grants and profile timestamps. */ .v2-assigned-vins label > .semi-input-wrapper { width: 100%; height: 32px; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; box-shadow: none; } .v2-assigned-vins label > .semi-input-wrapper:hover { border-color: #b9c8da; } .v2-assigned-vins label > .semi-input-wrapper-focus { border-color: #8ab4f7; box-shadow: 0 0 0 3px rgba(18,104,243,.06); } .v2-assigned-vins label > .semi-input-wrapper .semi-input { height: 30px; border: 0; padding: 0 7px; color: #34455c; font-size: 10px; } @media (max-width: 680px) { .v2-assigned-vins label > .semi-input-wrapper { height: 40px; } .v2-assigned-vins label > .semi-input-wrapper .semi-input { height: 38px; font-size: 12px; } } /* Semi UI twelfth migration: history/alert selection and profile upload. */ .v2-history-table-scroll tbody tr, .v2-alert-table-scroll tbody tr { transition: background .14s ease, box-shadow .14s ease; } .v2-history-table-scroll tbody tr { cursor: pointer; } .v2-history-table-scroll tr.is-selected td:first-child, .v2-alert-table-scroll tr.is-selected td:first-child { box-shadow: inset 3px 0 var(--v2-blue); } .v2-history-table-scroll td > .semi-checkbox, .v2-alert-table-scroll td > .semi-radio { display: inline-flex; margin: 0; vertical-align: middle; } .v2-history-table-scroll td > .semi-checkbox .semi-checkbox-inner, .v2-alert-table-scroll td > .semi-radio .semi-radio-inner { transform: scale(.86); } .v2-history-table-scroll td > .semi-button { height: 28px; border-radius: 6px; padding: 0 7px; color: var(--v2-blue); font-size: 10px; } .v2-profile-sync-fields .is-file > .semi-upload { display: block; width: 100%; } .v2-profile-sync-fields .is-file > .semi-upload > .semi-button { width: 100%; height: 34px; justify-content: flex-start; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 7px; background: #fff; padding: 0 10px; color: #4f6076; font-size: 10px; text-overflow: ellipsis; } .v2-profile-sync-fields .is-file > .semi-upload > .semi-button:hover { border-color: #b9c8da; background: #f8fafc; } .v2-profile-sync-loading { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 9px; color: #68788d; font-size: 11px; } @media (max-width: 680px) { .v2-profile-sync-fields .is-file > .semi-upload > .semi-button { height: 42px; font-size: 12px; } } /* Semi UI thirteenth migration: global navigation shell. */ .v2-navigation.semi-navigation { width: 100%; min-height: 0; flex: 1; border: 0; background: #fff; padding: 12px 9px; } .v2-navigation.semi-navigation .semi-navigation-inner, .v2-navigation.semi-navigation .semi-navigation-list-wrapper, .v2-navigation.semi-navigation .semi-navigation-list { width: 100%; min-height: 0; } .v2-navigation.semi-navigation .semi-navigation-item { min-height: 44px; margin: 2px 0; overflow: hidden; border-radius: 9px; color: #59677c; } .v2-navigation.semi-navigation .semi-navigation-item-link { min-height: 44px; border-radius: inherit; color: inherit; text-decoration: none; } .v2-navigation.semi-navigation .semi-navigation-item-inner { min-height: 44px; padding: 0 13px; } .v2-navigation.semi-navigation .semi-navigation-item-icon { color: #7a8799; font-size: 18px; } .v2-navigation.semi-navigation .semi-navigation-item-text { color: inherit; font-size: 13px; font-weight: 620; } .v2-navigation.semi-navigation .semi-navigation-item:hover { background: #f6f8fb; color: #26364b; } .v2-navigation.semi-navigation .semi-navigation-item-selected { background: var(--v2-blue-soft); color: var(--v2-blue); box-shadow: inset 3px 0 var(--v2-blue); } .v2-navigation.semi-navigation .semi-navigation-item-selected .semi-navigation-item-icon { color: var(--v2-blue); } .v2-sidebar.is-collapsed .v2-navigation.semi-navigation { padding: 12px 8px; } .v2-sidebar.is-collapsed .v2-navigation.semi-navigation .semi-navigation-item, .v2-sidebar.is-collapsed .v2-navigation.semi-navigation .semi-navigation-item-link, .v2-sidebar.is-collapsed .v2-navigation.semi-navigation .semi-navigation-item-inner { width: 52px; min-width: 52px; } .v2-sidebar.is-collapsed .v2-navigation.semi-navigation .semi-navigation-item-inner { justify-content: center; padding: 0; } @media (max-width: 680px) { .v2-mobile-navigation > .semi-button.v2-mobile-nav-item { min-width: 0; min-height: 54px; flex-direction: column; gap: 4px; border-radius: 10px; padding: 0; color: #718096; } .v2-mobile-navigation > .semi-button.v2-mobile-nav-item .semi-button-content { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .v2-mobile-navigation > .semi-button.v2-mobile-nav-item.is-active { background: #edf4ff; color: var(--v2-blue); } .v2-mobile-more-sidesheet .semi-sidesheet-inner { overflow: hidden; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); } .v2-mobile-more-sidesheet .semi-sidesheet-header { border-bottom: 1px solid #edf1f5; padding: 15px 16px 12px; } .v2-mobile-more-sidesheet .semi-sidesheet-title > div { display: flex; flex-direction: column; gap: 3px; } .v2-mobile-more-sidesheet .semi-sidesheet-title strong { color: #17253a; font-size: 17px; } .v2-mobile-more-sidesheet .semi-sidesheet-title span { color: #8290a3; font-size: 11px; font-weight: 400; } .v2-mobile-more-sidesheet .semi-sidesheet-body { padding: 12px 14px 18px; } .v2-mobile-more-sidesheet nav { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; } .v2-mobile-more-sidesheet .v2-mobile-nav-item { min-height: 76px; border: 1px solid #e5eaf1; background: #f8fafc; } } /* Semi UI fourteenth migration: configuration workspaces use shared SideSheets. */ .v2-mileage-source-sidesheet .semi-sidesheet-inner, .v2-history-column-sidesheet .semi-sidesheet-inner { overflow: hidden; border-left: 1px solid rgba(220,228,238,.9); box-shadow: -18px 0 60px rgba(20,38,66,.14); } .v2-mileage-source-sidesheet .semi-sidesheet-header, .v2-history-column-sidesheet .semi-sidesheet-header { min-height: 72px; border-bottom: 1px solid #e9eef5; padding: 16px 18px; } .v2-mileage-source-title, .v2-history-column-title { display: flex; flex-direction: column; gap: 4px; } .v2-mileage-source-title strong, .v2-history-column-title strong { color: #17253a; font-size: 18px; font-weight: 720; letter-spacing: -.025em; } .v2-mileage-source-title span, .v2-history-column-title span { color: #7b889b; font-size: 11px; font-weight: 400; } .v2-mileage-source-sidesheet .semi-sidesheet-body { padding: 14px; } .v2-mileage-source-sidesheet .semi-sidesheet-footer, .v2-history-column-sidesheet .semi-sidesheet-footer { border-top: 1px solid #e9eef5; background: #fff; padding: 12px 16px; } .v2-mileage-source-list { display: grid; gap: 10px; } .v2-mileage-source-list article { min-height: 86px; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px 12px; border: 1px solid #e1e8f1; border-radius: 11px; background: #fff; padding: 13px; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .v2-mileage-source-list article:hover { border-color: #c6d6ea; box-shadow: 0 7px 20px rgba(31,55,86,.06); } .v2-mileage-source-list article.is-disabled { border-color: #edf1f5; background: #f8fafc; box-shadow: none; } .v2-mileage-source-list article > div { gap: 5px; } .v2-mileage-source-list article > div strong { color: #26364b; font-size: 13px; } .v2-mileage-source-list article > div small { gap: 8px; font-size: 10px; } .v2-mileage-source-list article > div small b { border-radius: 999px; background: #edf4ff; padding: 3px 7px; color: #3568a9; font-size: 9px; } .v2-mileage-source-list article > em { align-self: start; border-radius: 999px; background: #f1f5f9; padding: 4px 8px; color: #53657d; font-size: 9px; } .v2-mileage-source-list article > p { grid-column: 2 / -1; justify-content: flex-end; } .v2-mileage-source-switch.semi-switch { background: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(72,88,110,.08); } .v2-mileage-source-switch.semi-switch:hover { background: #b9c4d2; } .v2-mileage-source-switch.semi-switch-checked, .v2-mileage-source-switch.semi-switch-checked:hover { background: var(--v2-blue); box-shadow: 0 0 0 3px rgba(18,104,243,.09); } .v2-mileage-source-footer, .v2-history-column-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v2-mileage-source-footer > span, .v2-history-column-footer > span { color: #748196; font-size: 10px; line-height: 1.5; } .v2-mileage-source-footer > .semi-button { min-width: 88px; height: 36px; flex: 0 0 auto; border-radius: 8px; font-weight: 700; } .v2-history-column-sidesheet .semi-sidesheet-body { overflow: hidden; padding: 0; } .v2-history-column-content { display: flex; height: 100%; min-height: 0; flex-direction: column; } .v2-history-column-search { display: block; flex: 0 0 auto; border-bottom: 1px solid #e9eef5; background: #fbfcfe; padding: 12px 14px; } .v2-history-column-search > .semi-input-wrapper { width: 100%; height: 40px; border: 1px solid #d5dfeb; border-radius: 9px; background: #fff; padding: 0 11px; box-shadow: none; } .v2-history-column-search > .semi-input-wrapper-focus { border-color: #79a6ee; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-history-column-search .semi-input { height: 38px; padding-left: 7px; color: #34445a; font-size: 12px; } .v2-history-column-list { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 5px 14px 12px; } .v2-history-column-list > label { display: grid; min-height: 54px; grid-template-columns: auto minmax(0,1fr) minmax(80px,auto); align-items: center; gap: 10px; border-bottom: 1px solid #edf1f5; padding: 7px 4px; color: #34445a; cursor: pointer; } .v2-history-column-list > label:hover { background: #f8fbff; } .v2-history-column-list > label > .semi-checkbox { margin: 0; } .v2-history-column-list > label > .semi-checkbox .semi-checkbox-inner { border-radius: 4px; } .v2-history-column-list > label > span { display: grid; min-width: 0; gap: 4px; font-size: 12px; font-weight: 620; } .v2-history-column-list > label > span em { overflow: hidden; color: #78869a; font-size: 9px; font-style: normal; font-weight: 400; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .v2-history-column-list > label > small { overflow: hidden; border-radius: 5px; background: #f2f5f9; padding: 4px 6px; color: #7d899a; font: 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .v2-history-column-list > p { margin: 30px 8px; color: var(--v2-muted); text-align: center; font-size: 11px; } .v2-history-column-footer { justify-content: flex-end; } .v2-history-column-footer > span { margin-right: auto; } .v2-history-column-footer > .semi-button { height: 34px; border-radius: 8px; padding: 0 12px; font-size: 10px; } @media (max-width: 680px) { .v2-mileage-source-sidesheet .semi-sidesheet-inner, .v2-history-column-sidesheet .semi-sidesheet-inner { width: 100% !important; border-left: 0; } .v2-mileage-source-sidesheet .semi-sidesheet-header, .v2-history-column-sidesheet .semi-sidesheet-header { min-height: 68px; padding: 14px 16px; } .v2-mileage-source-title strong, .v2-history-column-title strong { font-size: 17px; } .v2-mileage-source-sidesheet .semi-sidesheet-body { padding: 10px; } .v2-mileage-source-list article { min-height: 92px; padding: 12px; } .v2-mileage-source-footer { align-items: stretch; flex-direction: column; } .v2-mileage-source-footer > .semi-button { width: 100%; height: 42px; } .v2-history-column-search { padding: 10px 12px; } .v2-history-column-search > .semi-input-wrapper { height: 44px; } .v2-history-column-search .semi-input { height: 42px; font-size: 16px; } .v2-history-column-list { padding: 4px 10px 12px; } .v2-history-column-list > label { min-height: 58px; grid-template-columns: auto minmax(0,1fr); } .v2-history-column-list > label > small { grid-column: 2; justify-self: start; margin-top: -4px; } .v2-history-column-footer { display: grid; grid-template-columns: 1fr 1fr; } .v2-history-column-footer > span { grid-column: 1 / -1; } .v2-history-column-footer > .semi-button { height: 40px; } } /* Semi UI metric actions: keep compact data surfaces readable and intentional. */ .v2-history-metric-tag.semi-tag { font-size: 10px; cursor: pointer; } .v2-alert-severity.semi-tag, .v2-alert-status.semi-tag { height: 24px; padding-inline: 8px; font-size: 10px; } @media (max-width: 680px) { .v2-history-metrics { min-height: 48px; padding: 7px 8px; } .v2-history-metrics > strong { font-size: 11px; } .v2-history-metric-tag.semi-tag { height: 32px; padding-inline: 9px 7px; font-size: 11px; } .v2-history-metric-scroll > span { display: none; } .v2-history-metrics .v2-history-metrics-manage.semi-button { z-index: 2; width: 36px; min-width: 36px; height: 34px; border: 1px solid #d7e3f2; background: #fff; padding: 0; box-shadow: -6px 0 12px rgba(255,255,255,.98); font-size: 0; } .v2-history-metrics .v2-history-metrics-manage.semi-button .semi-icon { margin: 0; font-size: 16px; } } /* Semi UI semantic tags: shared status grammar across access, reconciliation and operations. */ .v2-access-connection-tag.semi-tag, .v2-access-protocol-tag.semi-tag, .v2-reconcile-severity.semi-tag, .v2-reconcile-status.semi-tag, .v2-ops-health-tag.semi-tag { display: inline-flex; width: fit-content; min-height: 24px; align-items: center; border-radius: 6px; padding-inline: 8px; font-size: 10px; font-weight: 650; white-space: nowrap; } .v2-access-protocol-tag.semi-tag, .v2-ops-health-tag.semi-tag { gap: 5px; } .v2-access-protocol-tag.semi-tag i, .v2-ops-health-tag.semi-tag i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; } .v2-access-connection { align-items: start; } .v2-access-protocol-detail > header .v2-access-protocol-tag.semi-tag, .v2-reconcile-detail > .semi-card-body > header .v2-reconcile-severity.semi-tag { padding: 0 8px; } .v2-reconcile-table .v2-reconcile-severity.semi-tag, .v2-reconcile-table .v2-reconcile-status.semi-tag { min-height: 26px; } .v2-ops-kpis .v2-ops-health-tag.semi-tag { font-size: 9px; } .v2-ops-links article > .v2-ops-health-tag.semi-tag { min-height: 24px; padding-inline: 8px; font-size: 9px; } .v2-ops-health-tag.is-ok.semi-tag { background: #eaf8f2; color: #167759; } .v2-ops-health-tag.is-warning.semi-tag { background: #fff4e5; color: #a8620a; } .v2-ops-health-tag.is-error.semi-tag { background: #fff0ef; color: #c53c36; } @media (max-width: 680px) { .v2-access-connection-tag.semi-tag, .v2-access-protocol-tag.semi-tag, .v2-reconcile-severity.semi-tag, .v2-reconcile-status.semi-tag, .v2-ops-health-tag.semi-tag { min-height: 26px; font-size: 11px; } } /* Semi UI shared pagination: one compact rhythm for every data workspace. */ .v2-table-pagination-info { min-width: 0; overflow: hidden; color: #718096; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-table-pagination-controls { display: flex; min-width: 0; align-items: center; gap: 6px; } .v2-table-pagination-button.semi-button { height: 32px; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; padding: 0 10px; color: #52647a; font-size: 10px; font-weight: 650; box-shadow: 0 1px 2px rgba(15,23,42,.03); } .v2-table-pagination-button.semi-button:hover:not(.semi-button-disabled) { border-color: #a9c3e7; background: #f5f9ff; color: var(--v2-blue); } .v2-table-pagination-button.semi-button-disabled { background: #f7f9fc; color: #a5afbd; } .v2-table-pagination-current { display: inline-flex; min-width: 58px; height: 32px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #dce5f0; border-radius: 8px; background: #f7faff; color: #718096; font-size: 10px; font-variant-numeric: tabular-nums; } .v2-table-pagination-current b { color: var(--v2-blue); font-size: 11px; } .v2-table-pagination-current i { color: #adb7c5; font-style: normal; } .v2-table-pagination-size.semi-select { width: 92px; height: 32px; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; } .v2-table-pagination-size .semi-select-selection { height: 30px; margin-left: 9px; } .v2-table-pagination-size .semi-select-selection-text { height: 30px; font-size: 10px; line-height: 30px; } @media (max-width: 680px) { :is( .v2-alert-table-card, .v2-history-table-card, .v2-access-table-v3 ) > footer, .v2-monitor-table-panel > .semi-card-body > footer, .v2-mileage-results > .semi-card-body > footer, .v2-reconcile-pagination { align-items: stretch; gap: 8px; } :is( .v2-alert-table-card, .v2-history-table-card, .v2-access-table-v3 ) > footer:has(.v2-table-pagination-controls), .v2-monitor-table-panel > .semi-card-body > footer:has(.v2-table-pagination-controls), .v2-mileage-results > .semi-card-body > footer:has(.v2-table-pagination-controls), .v2-reconcile-pagination { min-height: 76px; flex-direction: column; justify-content: center; padding: 8px 10px; } .v2-table-pagination-info { width: 100%; font-size: 10px; } .v2-table-pagination-controls { width: 100%; } .v2-table-pagination-button.semi-button { height: 36px; flex: 1; padding: 0 8px; font-size: 11px; } .v2-table-pagination-current { height: 36px; flex: 0 0 58px; font-size: 11px; } .v2-table-pagination-size.semi-select { width: 92px; height: 36px; flex: 0 0 92px; } .v2-table-pagination-size .semi-select-selection, .v2-table-pagination-size .semi-select-selection-text { height: 34px; line-height: 34px; } } /* Semi UI alert workspace: unified rule selector and template action cards. */ .v2-alert-rule-list { display: flex; overflow: hidden; flex-direction: column; } .v2-alert-rule-list > header { flex: 0 0 auto; background: rgba(255,255,255,.96); } .v2-alert-rule-list > header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-alert-rule-list > header > div > span { color: #8793a4; font-size: 9px; } .v2-alert-rule-items { min-height: 0; overflow: auto; flex: 1 1 auto; background: #fff; } .v2-alert-rule-item.semi-button { width: 100%; height: auto; min-height: 76px; justify-content: flex-start; border: 0; border-bottom: 1px solid #edf1f6; border-radius: 0; background: #fff; padding: 11px 13px; color: #35465c; text-align: left; transition: background-color .16s ease, box-shadow .16s ease; } .v2-alert-rule-item.semi-button:hover { background: #f7faff; } .v2-alert-rule-item.semi-button.is-selected { background: linear-gradient(90deg,#edf5ff 0%,#f7faff 100%); box-shadow: inset 3px 0 #1268f3; } .v2-alert-rule-item.semi-button .semi-button-content { display: grid; width: 100%; min-width: 0; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 10px; white-space: normal; } .v2-alert-rule-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.12); } .v2-alert-rule-dot.is-critical { background: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.11); } .v2-alert-rule-dot.is-major { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.12); } .v2-alert-rule-copy { display: grid; min-width: 0; gap: 7px; } .v2-alert-rule-copy > span { display: flex; min-width: 0; align-items: center; gap: 7px; } .v2-alert-rule-copy strong { overflow: hidden; min-width: 0; color: #2d4058; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-rule-copy small { overflow: hidden; color: #7d8a9d; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-rule-copy .semi-tag, .v2-alert-rule-state.semi-tag { flex: 0 0 auto; border-radius: 5px; font-size: 8px; } .v2-alert-rule-empty.semi-empty { min-height: 210px; justify-content: center; padding: 24px 16px; } .v2-alert-rule-empty .semi-empty-image { width: 76px; height: 76px; } .v2-alert-rule-empty .semi-empty-title { color: #44536a; font-size: 12px; } .v2-alert-rule-empty .semi-empty-description { max-width: 210px; color: #8793a4; font-size: 9px; line-height: 1.55; } .v2-alert-rule-templates nav { align-items: stretch; } .v2-alert-template-card.semi-button { display: inline-flex; width: 100%; height: auto; min-height: 70px; justify-content: flex-start; flex-direction: row; gap: 0; border: 1px solid #d7e3f1; border-radius: 10px; background: rgba(255,255,255,.94); padding: 10px 11px; color: #3d4d63; text-align: left; } .v2-alert-template-card.semi-button:hover { border-color: #91b5ed; background: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.1); transform: translateY(-1px); } .v2-alert-template-card.semi-button-disabled { border-color: #e3e8ef; background: rgba(248,250,252,.82); transform: none; } .v2-alert-template-card.semi-button .semi-button-content { display: grid; width: 100%; min-width: 0; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; white-space: normal; } .v2-alert-template-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #edf5ff; color: #1268f3; font-size: 16px; } .v2-alert-template-card.semi-button-disabled .v2-alert-template-icon { background: #f0f2f5; color: #9aa5b4; } .v2-alert-template-copy { display: grid; min-width: 0; gap: 5px; } .v2-alert-template-copy b { color: #30435b; font-size: 11px; } .v2-alert-template-copy small { overflow: hidden; color: #7c899b; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-template-card .semi-tag { max-width: 118px; overflow: hidden; border-radius: 5px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 680px) { .v2-alert-rule-list > header > div > span { font-size: 10px; } .v2-alert-rule-items { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-padding-left: 12px; scroll-snap-type: x proximity; padding: 10px 12px 12px; gap: 9px; } .v2-alert-rule-items::-webkit-scrollbar, .v2-alert-rule-templates nav::-webkit-scrollbar { display: none; } .v2-alert-rule-item.semi-button { width: min(82vw,310px); min-width: min(82vw,310px); min-height: 84px; flex: 0 0 min(82vw,310px); border: 1px solid #dce5ef; border-radius: 10px; padding: 12px; scroll-snap-align: start; } .v2-alert-rule-item.semi-button.is-selected { border-color: #a9c8f6; box-shadow: inset 3px 0 #1268f3, 0 7px 18px rgba(37,99,235,.08); } .v2-alert-rule-copy strong { font-size: 12px; } .v2-alert-rule-copy small { font-size: 10px; } .v2-alert-rule-copy .semi-tag, .v2-alert-rule-state.semi-tag { font-size: 9px; } .v2-alert-rule-empty.semi-empty { width: 100%; min-height: 150px; } .v2-alert-rule-templates nav { gap: 9px; scrollbar-width: none; padding-bottom: 3px; } .v2-alert-template-card.semi-button { min-width: min(84vw,320px); min-height: 82px; flex: 0 0 min(84vw,320px); padding: 11px 12px; } .v2-alert-template-card.semi-button .semi-button-content { grid-template-columns: 38px minmax(0,1fr); } .v2-alert-template-icon { width: 38px; height: 38px; } .v2-alert-template-copy b { font-size: 12px; } .v2-alert-template-copy small { font-size: 10px; white-space: normal; } .v2-alert-template-card .semi-tag { grid-column: 2; justify-self: start; font-size: 9px; } } /* Semi UI vehicle identity and profile synchronization shells. */ .v2-identity-band.semi-card { display: block; min-height: 96px; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-identity-band > .semi-card-body { display: grid; min-height: 94px; grid-template-columns: minmax(260px,1fr) minmax(340px,1.25fr) auto; align-items: center; padding: 0; } .v2-profile-sync-panel.semi-card { width: min(900px,100%); overflow: hidden; border: 1px solid #d9e3ef; border-radius: 12px; background: #fff; padding: 0; box-shadow: 0 16px 44px rgba(25,45,74,.09); } .v2-profile-sync-panel > .semi-card-body { padding: 16px; } .v2-profile-sync-panel > .semi-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .v2-profile-sync-panel > .semi-card-body > header strong { color: #26364c; font-size: 14px; } .v2-profile-sync-panel > .semi-card-body > header p { margin: 5px 0 0; color: var(--v2-muted); font-size: 9px; } .v2-profile-sync-panel > .semi-card-body > header > .semi-button { height: 30px; flex: 0 0 auto; border-radius: 7px; padding: 0 10px; color: #6e7e92; font-size: 10px; } .v2-profile-sync-panel > .semi-card-body > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .v2-profile-sync-panel > .semi-card-body > footer .semi-button { height: 34px; border-radius: 7px; padding: 0 14px; font-size: 10px; font-weight: 650; } .v2-profile-sync-panel > .semi-card-body > footer .semi-button-primary.semi-button-solid { box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-profile-sync-loading > .semi-card-body { display: flex; min-height: 120px; align-items: center; justify-content: center; } .v2-profile-sync-loading > .semi-card-body > [role="status"] { display: flex; align-items: center; gap: 9px; color: var(--v2-muted); font-size: 11px; } @media (max-width: 1180px) { .v2-identity-band > .semi-card-body { grid-template-columns: minmax(240px,1fr) minmax(300px,1fr); } } @media (max-width: 900px) { .v2-identity-band > .semi-card-body { grid-template-columns: 1fr; } } @media (max-width: 680px) { .v2-profile-sync-panel > .semi-card-body { padding: 13px; } .v2-profile-sync-panel > .semi-card-body > footer .semi-button { height: 40px; flex: 1; } } /* Semi UI alert workspace shells: rule list, rule editor and notifications. */ .v2-alert-rule-list.semi-card, .v2-alert-rule-editor.semi-card, .v2-alert-notifications.semi-card { min-width: 0; min-height: 0; border: 1px solid #dbe3ed; border-radius: var(--v2-radius); background: #fff; box-shadow: 0 10px 30px rgba(31,53,80,.06); } .v2-alert-rule-list.semi-card { display: flex; overflow: hidden; flex-direction: column; } .v2-alert-rule-list > .semi-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; } .v2-alert-rule-editor.semi-card { overflow: auto; overscroll-behavior: contain; } .v2-alert-rule-editor > .semi-card-body { min-height: 100%; padding: 0; } .v2-alert-rule-editor-form { display: flex; min-height: 100%; flex-direction: column; } .v2-alert-notifications.semi-card { display: flex; overflow: hidden; flex: 1; flex-direction: column; } .v2-alert-notifications > .semi-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; } .v2-alert-rule-list > .semi-card-body > header, .v2-alert-rule-editor-form > header { display: flex; min-height: 52px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--v2-border); background: rgba(255,255,255,.97); padding: 0 15px; } .v2-alert-rule-editor-form > header { position: sticky; top: 0; z-index: 4; } .v2-alert-rule-list > .semi-card-body > header > div, .v2-alert-rule-editor-form > header > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .v2-alert-rule-list > .semi-card-body > header strong, .v2-alert-rule-editor-form > header strong { color: #26364c; font-size: 13px; } .v2-alert-rule-list > .semi-card-body > header span, .v2-alert-rule-editor-form > header span { color: var(--v2-muted); font-size: 10px; } .v2-alert-rule-list > .semi-card-body > header > .semi-button, .v2-alert-rule-editor-form > header > .semi-button { height: 32px; flex: 0 0 auto; border-radius: 7px; padding: 0 11px; color: var(--v2-blue); font-size: 10px; font-weight: 650; } .v2-alert-rule-editor-form > footer { position: sticky; bottom: 0; z-index: 4; display: flex; min-height: 58px; align-items: center; gap: 12px; border-top: 1px solid var(--v2-border); background: rgba(255,255,255,.97); padding: 10px 16px; box-shadow: 0 -8px 22px rgba(31,53,80,.04); } .v2-alert-rule-editor-form > footer > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; } .v2-alert-rule-editor-form > footer b { color: #34455c; font-size: 10px; } .v2-alert-rule-editor-form > footer span { color: var(--v2-muted); font-size: 9px; } .v2-alert-rule-editor-form > footer em { color: var(--v2-red); font-size: 9px; font-style: normal; } .v2-alert-rule-editor-form > footer > .semi-button { height: 38px; flex: 0 0 auto; border-radius: 8px; padding: 0 18px; font-size: 11px; font-weight: 700; box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-alert-notification-list { min-height: 0; overflow: auto; flex: 1; overscroll-behavior: contain; } .v2-alert-notifications > .semi-card-body > footer { display: flex; min-height: 48px; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 7px 18px; border-top: 1px solid var(--v2-border); padding: 10px 16px; color: #7f8c9f; font-size: 9px; } .v2-alert-notifications > .semi-card-body > footer b { color: #4f5d72; } @media (max-width: 900px) { .v2-alert-rule-editor.semi-card { overflow: visible; } .v2-alert-rule-editor-form > header, .v2-alert-rule-editor-form > footer { position: static; } } @media (max-width: 680px) { .v2-alert-rule-list > .semi-card-body > header, .v2-alert-rule-editor-form > header { min-height: 56px; padding: 8px 12px; } .v2-alert-rule-list > .semi-card-body > header > .semi-button, .v2-alert-rule-editor-form > header > .semi-button { height: 36px; } .v2-alert-rule-editor-form > footer { align-items: stretch; flex-direction: column; padding: 12px; } .v2-alert-rule-editor-form > footer > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-alert-notifications > .semi-card-body > footer { align-items: flex-start; flex-direction: column; gap: 6px; } } /* Semi UI access workspace: disclosure panels, identity cards and mobile vehicle cards. */ .v2-access-identity-queue-v3.semi-collapse, .v2-access-settings.semi-collapse { overflow: hidden; flex: 0 0 auto; border: 1px solid #dbe3ed; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(31,53,80,.05); } .v2-access-identity-queue-v3 > .semi-collapse-item, .v2-access-settings > .semi-collapse-item { display: block; max-height: none; overflow: visible; border: 0; padding: 0; } .v2-access-identity-queue-v3 .semi-collapse-header, .v2-access-settings .semi-collapse-header { min-height: 56px; align-items: center; border: 0; padding: 0 14px; color: #34465c; } .v2-access-identity-queue-v3 .semi-collapse-header:hover, .v2-access-settings .semi-collapse-header:hover { background: #f8fbff; } .v2-access-identity-queue-v3 .semi-collapse-header-icon, .v2-access-settings .semi-collapse-header-icon { color: #75869c; } .v2-access-collapse-title { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; } .v2-access-collapse-title > span:first-child { display: grid; min-width: 0; gap: 4px; } .v2-access-collapse-title strong { color: #304158; font-size: 12px; } .v2-access-collapse-title small { overflow: hidden; color: #7c899b; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } .v2-access-collapse-title > .semi-tag { flex: 0 0 auto; border-radius: 6px; font-size: 9px; } .v2-access-identity-queue-v3 .semi-collapse-content, .v2-access-settings .semi-collapse-content { border-top: 1px solid #e7edf4; padding: 0; } .v2-access-identity-queue-v3 .semi-collapse-content-wrapper, .v2-access-settings .semi-collapse-content-wrapper { padding: 0; } .v2-access-identity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 12px; } .v2-access-identity-card.semi-card { min-width: 0; border: 1px solid #e0e7f0; border-radius: 9px; background: #fbfcfe; box-shadow: none; } .v2-access-identity-card .semi-card-body { display: grid; gap: 7px; padding: 11px 12px; } .v2-access-identity-card header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; } .v2-access-identity-card header b { overflow: hidden; min-width: 0; color: #31445d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-identity-card header .semi-tag { flex: 0 0 auto; border-radius: 5px; font-size: 8px; } .v2-access-identity-card span, .v2-access-identity-card small { overflow: hidden; color: #748296; font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .v2-access-identity-card small { color: #4e6077; white-space: normal; } .v2-access-settings fieldset { padding: 14px; gap: 12px; } .v2-access-settings fieldset label { min-width: 124px; gap: 7px; color: #5e6f84; font-size: 10px; font-weight: 650; } .v2-access-settings fieldset label > .semi-input-wrapper { width: 124px; height: 38px; border-radius: 8px; } .v2-access-settings fieldset label .semi-input { height: 36px; font-size: 11px; } .v2-access-settings fieldset label .semi-input-suffix { color: #8a96a7; font-size: 9px; } .v2-access-settings fieldset > .semi-button { height: 38px; border-radius: 8px; padding: 0 15px; font-weight: 650; } .v2-access-mobile-card.semi-card { width: 100%; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 11px; background: #fff; box-shadow: 0 4px 14px rgba(31,53,80,.035); content-visibility: auto; contain-intrinsic-size: auto 190px; } .v2-access-mobile-card.semi-card.is-selected { border-color: #8eb8f8; box-shadow: inset 3px 0 #1268f3, 0 7px 18px rgba(18,104,243,.08); } .v2-access-mobile-action.semi-button { display: block; width: 100%; height: auto; min-height: 0; border-radius: 0; background: #fff; padding: 0; color: #334155; text-align: left; } .v2-access-mobile-action.semi-button:hover { background: #f8fbff; } .v2-access-mobile-action.semi-button:active { background: #f1f6ff; } .v2-access-mobile-action .semi-button-content { display: block; width: 100%; min-width: 0; white-space: normal; } .v2-access-mobile-card-content { display: grid; min-width: 0; gap: 9px; padding: 12px; } .v2-access-mobile-card-content > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .v2-access-mobile-card-content > header > span:first-child { display: grid; min-width: 0; gap: 3px; } .v2-access-mobile-card-content > header strong, .v2-access-mobile-card-content > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-access-mobile-card-content > header strong { color: #2d4058; font-size: 15px; } .v2-access-mobile-card-content > header small { color: #8491a3; font-size: 10px; } .v2-access-mobile-card-content > p { margin: 0; color: #68768a; font-size: 11px; } .v2-access-mobile-protocols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; border-top: 1px solid #edf1f5; padding-top: 9px; } .v2-access-mobile-card-content > footer { display: flex; align-items: center; justify-content: flex-end; gap: 2px; color: var(--v2-blue); font-size: 11px; font-weight: 700; } .v2-access-mobile-card-content > footer svg { width: 13px; height: 13px; } @media (max-width: 900px) { .v2-access-identity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 680px) { .v2-access-identity-queue-v3 .semi-collapse-header, .v2-access-settings .semi-collapse-header { min-height: 66px; padding: 0 12px; } .v2-access-collapse-title { gap: 9px; } .v2-access-collapse-title strong { font-size: 13px; } .v2-access-collapse-title small { max-width: 255px; font-size: 10px; } .v2-access-collapse-title > .semi-tag { font-size: 10px; } .v2-access-identity-grid { grid-template-columns: 1fr; gap: 8px; padding: 10px; } .v2-access-identity-card .semi-card-body { padding: 12px; } .v2-access-identity-card header b { font-size: 12px; } .v2-access-identity-card span, .v2-access-identity-card small { font-size: 10px; } .v2-access-settings fieldset { align-items: stretch; flex-direction: column; padding: 12px; } .v2-access-settings fieldset label { width: 100%; } .v2-access-settings fieldset label > .semi-input-wrapper { width: 100%; height: 42px; } .v2-access-settings fieldset label .semi-input { height: 40px; font-size: 12px; } .v2-access-settings fieldset > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-access-mobile-card-content { gap: 7px; padding: 10px 11px; } .v2-access-mobile-card-content > p { font-size: 10px; } .v2-access-mobile-protocols { gap: 4px; padding-top: 7px; } .v2-access-mobile-list .v2-access-protocol-cell { padding: 6px; } } /* Semi UI vehicle record: evidence actions stay lightweight inside the data dashboard. */ .v2-current-location .v2-current-address-action.semi-button { width: max-content; max-width: 100%; height: 30px; min-width: 0; overflow: hidden; border-radius: 7px; padding: 0 9px; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .v2-current-location .v2-current-address-action.semi-button .semi-button-content { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .v2-current-location .v2-current-address-action.semi-button.is-error { border-color: #edb5b0; background: #fff5f4; color: var(--v2-red); } .v2-live-source-link.semi-button { display: inline-flex; width: 100%; height: auto; min-height: 29px; justify-content: flex-start; margin-top: 2px; border-radius: 7px; padding: 2px 5px 2px 0; color: #25364d; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; } .v2-live-source-link.semi-button:hover { background: #edf5ff; color: var(--v2-blue); } .v2-live-source-link.semi-button .semi-button-content { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; } .v2-live-source-link.semi-button .semi-button-content > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; } .v2-live-source-link.semi-button .semi-button-content > svg { flex: 0 0 auto; color: #9aabc0; font-size: 12px; } .v2-live-source-link.semi-button:hover .semi-button-content > svg { color: var(--v2-blue); transform: translateX(1px); } .v2-map-source-link.semi-button { display: inline-flex; width: auto; max-width: calc(100% - 180px); height: 30px; min-width: 0; justify-content: flex-start; border-radius: 7px; padding: 0 7px; color: #64748b; font-size: 9px; font-weight: 500; text-align: left; } .v2-map-source-link.semi-button:hover { background: #edf5ff; color: var(--v2-blue); } .v2-map-source-link.semi-button .semi-button-content { display: block; overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .v2-map-source-link.semi-button .semi-button-icon { flex: 0 0 auto; } @media (max-width: 680px) { .v2-current-location .v2-current-address-action.semi-button { height: 34px; font-size: 10px; } .v2-live-source-link.semi-button { min-height: 34px; font-size: 17px; } .v2-map-source-link.semi-button { width: 100%; max-width: 100%; height: 34px; padding: 0 4px; font-size: 10px; } } /* Semi UI source diagnostic evidence: summary cards, states and audit trail. */ .v2-source-empty.semi-empty { min-height: 180px; padding: 28px 24px; } .v2-source-empty .semi-empty-image { width: 104px; height: 82px; } .v2-source-empty .semi-empty-title { color: #2f435b; font-size: 15px; font-weight: 700; } .v2-source-empty .semi-empty-description { max-width: 560px; color: var(--v2-muted); font-size: 12px; line-height: 1.6; } .v2-source-loading { display: flex; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--v2-muted); text-align: center; } .v2-source-loading strong { margin-top: 5px; color: #2f435b; font-size: 15px; } .v2-source-loading span { font-size: 11px; } .v2-source-summary { gap: 10px; border-block: 1px solid #e1e9f3; background: linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%); padding: 12px 14px; } .v2-source-summary-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dce5f0; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(31,53,80,.045); } .v2-source-summary-card > .semi-card-body { min-height: 94px; padding: 13px 14px; } .v2-source-summary-card small, .v2-source-summary-card > .semi-card-body > span:not(.semi-tag) { display: block; overflow: hidden; color: #7b899c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-summary-card strong { display: block; margin: 8px 0 7px; overflow: hidden; color: #23384f; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .v2-source-summary-card .semi-tag { width: max-content; max-width: 100%; min-height: 22px; overflow: hidden; border-radius: 999px; color: #1769d2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-summary-card.is-ok { border-color: #bfe4d5; box-shadow: inset 3px 0 #22a878, 0 5px 16px rgba(31,53,80,.045); } .v2-source-summary-card.is-warning { border-color: #edcc91; box-shadow: inset 3px 0 #e8a12b, 0 5px 16px rgba(31,53,80,.045); } .v2-source-recommendation.semi-card { overflow: hidden; margin: 14px 14px 10px; border: 1px solid #d8e5fb; border-left: 4px solid #2f6fe4; border-radius: 9px; background: linear-gradient(100deg, #f1f6ff 0%, #f7faff 100%); padding: 0; box-shadow: none; } .v2-source-recommendation > .semi-card-body { padding: 12px 14px; } .v2-source-recommendation header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v2-source-recommendation header .semi-tag { flex: 0 0 auto; min-height: 22px; border-radius: 999px; font-size: 10px; } .v2-source-recommendation header span { overflow: hidden; color: #6e7f95; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-recommendation p { margin: 9px 0 0; color: #35506e; font-size: 12px; line-height: 1.65; } .v2-source-readonly { display: flex; align-items: center; gap: 9px; margin: 0 14px 10px; border: 1px solid #f1ddb1; border-radius: 8px; background: #fff9ec; padding: 9px 11px; } .v2-source-readonly .semi-tag { flex: 0 0 auto; min-height: 22px; border-radius: 999px; font-size: 10px; } .v2-source-readonly span { color: #86601b; font-size: 11px; line-height: 1.5; } .v2-source-audit.semi-card { overflow: hidden; margin: 0 14px 14px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: none; } .v2-source-audit > .semi-card-body > p { margin: 0; padding: 16px 13px; color: var(--v2-muted); font-size: 11px; } .v2-source-audit > .semi-card-body > ol { margin: 0; padding: 8px 13px; } .v2-source-audit > .semi-card-body > ol li { min-height: 44px; padding-block: 8px; } .v2-source-audit > .semi-card-body > ol li b { font-size: 11px; } .v2-source-audit > .semi-card-body > ol li span { font-size: 11px; } .v2-source-audit > .semi-card-body > ol li em { font-size: 10px; } @media (max-width: 1180px) { .v2-source-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 680px) { .v2-source-empty.semi-empty, .v2-source-loading { min-height: 190px; padding: 22px 14px; } .v2-source-summary { grid-template-columns: 1fr; gap: 8px; padding: 10px; } .v2-source-summary-card > .semi-card-body { min-height: 88px; padding: 12px 13px; } .v2-source-summary-card small, .v2-source-summary-card > .semi-card-body > span:not(.semi-tag) { font-size: 11px; } .v2-source-summary-card strong { margin-block: 7px; font-size: 16px; } .v2-source-recommendation { margin: 10px; } .v2-source-recommendation > .semi-card-body { padding: 12px; } .v2-source-recommendation header { align-items: flex-start; flex-direction: column; gap: 7px; } .v2-source-recommendation header span { width: 100%; font-size: 10px; white-space: normal; } .v2-source-recommendation p { font-size: 12px; } .v2-source-readonly { align-items: flex-start; margin: 0 10px 10px; } .v2-source-readonly span { font-size: 11px; } .v2-source-audit { margin: 0 10px 10px; } } /* Semi UI alert evidence inspector: readable descriptions, evidence cards and audit timeline. */ .v2-alert-inspector.semi-card { background: #f6f8fb; } .v2-alert-inspector > .semi-card-body { display: flex; min-height: 100%; flex-direction: column; padding: 0; } .v2-alert-inspector > .semi-card-body > header { position: sticky; z-index: 5; top: 0; min-height: 64px; flex: 0 0 auto; border-bottom: 1px solid #dfe7f1; background: rgba(255,255,255,.97); padding: 12px 14px; backdrop-filter: blur(12px); } .v2-alert-inspector > .semi-card-body > header > div { gap: 8px; } .v2-alert-inspector > .semi-card-body > header strong { overflow: hidden; color: #23384f; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-inspector > .semi-card-body > header span { gap: 6px; } .v2-alert-inspector-content { display: grid; gap: 10px; padding: 10px; } .v2-alert-detail-card.semi-card { overflow: hidden; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(31,53,80,.035); } .v2-alert-detail-card > .semi-card-header { min-height: 42px; border-color: #e5ebf2; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); padding: 0 12px; } .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title h6, .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title > strong { color: #31475f; font-size: 12px; font-weight: 700; } .v2-alert-detail-card > .semi-card-body { padding: 12px; } .v2-alert-detail-card > .semi-card-body[style*="padding: 0"] { padding: 0 !important; } .v2-alert-descriptions.semi-descriptions { width: 100%; line-height: 1.5; } .v2-alert-descriptions.semi-descriptions table { width: 100%; table-layout: fixed; } .v2-alert-descriptions .semi-descriptions-item { min-width: 0; border-bottom: 1px solid #edf1f5; padding: 9px 11px; } .v2-alert-descriptions tr:last-child .semi-descriptions-item { border-bottom: 0; } .v2-alert-descriptions .semi-descriptions-item-th { width: 92px; background: #fafbfd; padding-right: 10px; } .v2-alert-descriptions .semi-descriptions-key { color: #7a899c; font-size: 10px; line-height: 1.5; } .v2-alert-descriptions .semi-descriptions-value { display: block; overflow: hidden; color: #30445b; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; text-overflow: ellipsis; } .v2-alert-descriptions code { color: #405873; font: 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap: anywhere; } .v2-alert-descriptions .semi-tag { min-height: 22px; border-radius: 999px; font-size: 9px; } .v2-alert-evidence-card > .semi-card-body { background: #fbfcfe; } .v2-alert-evidence { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; padding: 11px; } .v2-alert-evidence > .v2-alert-evidence-value.semi-card { overflow: hidden; border: 1px solid #dfe7f0; border-radius: 9px; background: #fff; box-shadow: none; } .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body { display: flex; min-height: 74px; align-items: center; justify-content: center; flex-direction: column; padding: 10px; text-align: center; } .v2-alert-evidence > .v2-alert-evidence-value.is-trigger { border-color: #efc7c4; background: #fff9f8; } .v2-alert-evidence > .semi-tag { align-self: center; border-radius: 999px; font-size: 9px; font-weight: 700; } .v2-alert-evidence small { color: #7a899c; font-size: 10px; } .v2-alert-evidence strong { display: -webkit-box; max-width: 100%; margin-top: 8px; overflow: hidden; color: #30445b; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .v2-alert-evidence > .v2-alert-evidence-value.is-trigger strong { color: #c03f39; } .v2-alert-progress-card > .semi-card-body { padding: 12px 12px 2px; } .v2-alert-timeline.semi-timeline { padding: 2px 0 0; } .v2-alert-timeline .semi-timeline-item { padding-bottom: 18px; } .v2-alert-timeline .semi-timeline-item-content { margin-left: 23px; } .v2-alert-timeline .semi-timeline-item-content strong { color: #30445b; font-size: 11px; } .v2-alert-timeline .semi-timeline-item-content-time { color: #8491a3; font-size: 9px; } .v2-alert-timeline .semi-timeline-item-content p { margin: 5px 0 0; color: #62748a; font-size: 10px; line-height: 1.5; } .v2-alert-timeline-empty.semi-empty { min-height: 116px; padding: 12px; } .v2-alert-timeline-empty .semi-empty-image { width: 54px; height: 44px; } .v2-alert-timeline-empty .semi-empty-title { color: #4b5e74; font-size: 11px; } .v2-alert-timeline-empty .semi-empty-description { max-width: 250px; color: #8995a5; font-size: 9px; line-height: 1.5; } .v2-alert-disposition-card > .semi-card-body { padding: 12px; } .v2-alert-disposition-card .v2-alert-actions { gap: 7px; margin-top: 10px; } .v2-alert-disposition-card .v2-alert-actions > .semi-button { height: 36px; border-radius: 7px; font-size: 11px; } .v2-alert-inspector-empty.semi-empty { min-height: 340px; justify-content: center; padding: 30px 20px; background: #fff; } .v2-alert-inspector-empty .semi-empty-image { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; background: #edf5ff; color: #3577d3; font-size: 28px; } .v2-alert-inspector-empty .semi-empty-title { color: #34495f; font-size: 14px; font-weight: 700; } .v2-alert-inspector-empty .semi-empty-description { max-width: 250px; color: #8290a3; font-size: 11px; line-height: 1.6; } .v2-alert-inspector > .semi-card-body > .v2-alert-links { position: sticky; z-index: 4; bottom: 0; min-height: 48px; flex: 0 0 auto; gap: 6px; border-top: 1px solid #dfe7f1; background: rgba(255,255,255,.97); padding: 7px 10px; backdrop-filter: blur(12px); } .v2-alert-inspector > .semi-card-body > .v2-alert-links a { height: 34px; border-radius: 7px; background: #f3f7fc; font-size: 10px; font-weight: 650; } .v2-alert-inspector > .semi-card-body > .v2-alert-links a:hover { background: #eaf3ff; } @media (max-width: 680px) { .v2-alert-inspector > .semi-card-body > header { position: static; min-height: 62px; } .v2-alert-inspector-content { gap: 9px; padding: 9px; } .v2-alert-detail-card > .semi-card-header { min-height: 44px; } .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title h6, .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title > strong { font-size: 13px; } .v2-alert-descriptions .semi-descriptions-item { padding: 10px; } .v2-alert-descriptions .semi-descriptions-item-th { width: 88px; } .v2-alert-descriptions .semi-descriptions-key { font-size: 11px; } .v2-alert-descriptions .semi-descriptions-value { font-size: 12px; } .v2-alert-evidence { gap: 6px; padding: 10px; } .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body { min-height: 78px; padding: 8px; } .v2-alert-evidence strong { font-size: 13px; } .v2-alert-timeline .semi-timeline-item-content strong { font-size: 12px; } .v2-alert-timeline .semi-timeline-item-content-time, .v2-alert-timeline .semi-timeline-item-content p { font-size: 10px; } .v2-alert-disposition-card .v2-alert-actions { grid-template-columns: 1fr; } .v2-alert-disposition-card .v2-alert-actions > .semi-button { width: 100%; height: 42px; justify-content: center; } .v2-alert-inspector > .semi-card-body > .v2-alert-links { position: static; min-height: 54px; padding: 8px 9px; } .v2-alert-inspector > .semi-card-body > .v2-alert-links a { height: 38px; font-size: 11px; } } /* Semi UI mileage summary and source strategy: consistent metric groups and source cards. */ .v2-mileage-summary.semi-card { display: block; overflow: hidden; border: 1px solid #dce4ee; border-radius: 12px; background: #f7f9fc; box-shadow: 0 6px 22px rgba(24,39,62,.045); } .v2-mileage-summary > .semi-card-body { display: grid; grid-template-columns: minmax(390px,1.05fr) minmax(0,1.45fr); padding: 0; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary { border: 0; border-radius: 0; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { position: relative; display: flex; overflow: hidden; min-height: 120px; justify-content: center; flex-direction: column; background: linear-gradient(125deg,#0f60e5 0%,#1f79f3 100%); padding: 20px 26px 21px !important; color: #fff; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body::after { position: absolute; right: -34px; bottom: -54px; width: 150px; height: 150px; border: 26px solid rgba(255,255,255,.08); border-radius: 50%; content: ''; } .v2-mileage-summary > .semi-card-body > .is-primary small, .v2-mileage-summary > .semi-card-body > .is-primary span, .v2-mileage-summary > .semi-card-body > .is-primary strong { position: relative; z-index: 1; } .v2-mileage-summary > .semi-card-body > .is-primary small, .v2-mileage-summary > .semi-card-body > .is-primary span { color: rgba(255,255,255,.78); } .v2-mileage-summary > .semi-card-body > .is-primary strong { color: #fff; font-size: clamp(29px,2.2vw,37px); } .v2-mileage-summary > .semi-card-body > .is-primary .v2-mileage-summary-value { min-height: 1.22em; margin: 6px 0 5px; padding: 2px 0 3px; line-height: 1.16; } .v2-mileage-summary-secondary.semi-card-group { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); background: #fff; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card.semi-card { min-width: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card + .v2-mileage-summary-card { border-left: 1px solid #e2e8f0; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card > .semi-card-body { display: flex; min-width: 0; min-height: 104px; justify-content: center; flex-direction: column; padding: 18px 20px !important; } .v2-mileage-source-card.semi-card { min-height: 88px; overflow: hidden; border: 1px solid #dfe7f0; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(31,55,86,.035); transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-mileage-source-card.semi-card:hover { border-color: #b9cce4; box-shadow: 0 8px 22px rgba(31,55,86,.075); transform: translateY(-1px); } .v2-mileage-source-card.semi-card.is-disabled { border-color: #e8edf3; background: #f8fafc; box-shadow: none; transform: none; } .v2-mileage-source-card > .semi-card-body { display: grid; min-height: 86px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px 12px; padding: 13px; } .v2-mileage-source-copy { display: grid; min-width: 0; gap: 6px; } .v2-mileage-source-copy > strong { overflow: hidden; color: #26364b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-source-copy > small { display: flex; min-width: 0; align-items: center; gap: 8px; } .v2-mileage-source-copy > small .semi-tag { flex: 0 0 auto; min-height: 22px; border-radius: 999px; font-size: 9px; } .v2-mileage-source-copy code { overflow: hidden; color: #7d8a9c; font: 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-source-priority.semi-tag { align-self: start; min-height: 23px; border-radius: 999px; font-size: 9px; } .v2-mileage-source-card.is-disabled .v2-mileage-source-copy, .v2-mileage-source-card.is-disabled .v2-mileage-source-priority { opacity: .62; } .v2-mileage-source-order { display: flex; grid-column: 2 / -1; justify-content: flex-end; gap: 4px; } .v2-mileage-source-order > .semi-button { width: 30px; height: 30px; min-width: 30px; border: 1px solid #dbe4ee; border-radius: 7px; background: #fff; padding: 0; color: #607188; } .v2-mileage-source-order > .semi-button:hover { border-color: #a9bfdc; background: #f4f8fd; color: var(--v2-blue); } @media (max-width: 680px) { .v2-mileage-summary.semi-card { overflow: visible; border: 0; background: transparent; box-shadow: none; } .v2-mileage-summary > .semi-card-body { grid-template-columns: 1fr; gap: 7px; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary { overflow: hidden; border-radius: 10px; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { min-height: 96px; padding: 13px 14px 14px !important; } .v2-mileage-summary > .semi-card-body > .is-primary .v2-mileage-summary-value { min-height: 1.2em; margin: 4px 0 3px; padding: 1px 0 2px; font-size: 27px; } .v2-mileage-summary-secondary.semi-card-group { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 10px; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card > .semi-card-body { min-height: 76px; justify-content: flex-start; padding: 10px 9px !important; } .v2-mileage-summary-secondary.semi-card-group strong { margin: 5px 0 3px; font-size: 16px; } .v2-mileage-summary-secondary.semi-card-group span { font-size: 9px; line-height: 1.4; } .v2-mileage-source-card > .semi-card-body { min-height: 94px; padding: 12px; } .v2-mileage-source-copy > strong { font-size: 13px; } .v2-mileage-source-copy code { font-size: 9px; } .v2-mileage-source-order > .semi-button { width: 34px; height: 34px; min-width: 34px; } } /* Semi UI detail language: vehicle archive, lookup recovery and track evidence. */ .v2-record-descriptions.semi-descriptions { padding: 9px 14px 4px; } .v2-record-descriptions .semi-descriptions-item { min-height: 30px; padding: 6px 0; } .v2-record-descriptions .semi-descriptions-item-th { width: 104px; padding-right: 14px; } .v2-record-descriptions .semi-descriptions-key { color: #78879a; font-size: 10px; font-weight: 500; } .v2-record-descriptions .semi-descriptions-value { color: #34465c; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; } .v2-record-descriptions .semi-tag { min-height: 22px; border-radius: 999px; font-size: 9px; } .v2-not-found.semi-card { width: min(560px, calc(100% - 40px)); min-height: 0; align-self: center; justify-self: center; overflow: hidden; border: 1px solid #dce5ef; border-radius: 16px; background: #fff; padding: 0; box-shadow: 0 14px 40px rgba(31,53,80,.08); } .v2-not-found > .semi-card-body { width: 100%; } .v2-not-found .semi-empty { min-height: 360px; justify-content: center; padding: 36px 28px; } .v2-not-found .semi-empty-image { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; background: #edf5ff; color: #3476d2; font-size: 30px; } .v2-not-found .semi-empty-title { margin-top: 16px; color: #2f435a; font-size: 20px; font-weight: 750; } .v2-not-found .semi-empty-description { max-width: 380px; margin-top: 8px; color: #7c8a9c; font-size: 13px; line-height: 1.65; } .v2-not-found .semi-empty-content { margin-top: 20px; } .v2-not-found .semi-empty-content > a { height: auto; margin: 0; background: transparent; padding: 0; } .v2-not-found .semi-empty-content .semi-button { height: 40px; border-radius: 8px; padding: 0 18px; } .v2-track-overview-descriptions.semi-descriptions { padding: 0; } .v2-track-overview-descriptions .semi-descriptions-item { min-height: 28px; padding: 5px 0; } .v2-track-overview-descriptions .semi-descriptions-item-th { width: 98px; padding-right: 10px; } .v2-track-overview-descriptions .semi-descriptions-key { color: #7d8a9b; font-size: 9px; font-weight: 500; } .v2-track-overview-descriptions .semi-descriptions-value { color: #36475d; font-size: 10px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; } .v2-track-rail-empty.semi-empty { min-height: 280px; justify-content: center; padding: 24px 18px; } .v2-track-rail-empty .semi-empty-image { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #eef5ff; color: #3978d0; font-size: 23px; } .v2-track-rail-empty .semi-empty-title { margin-top: 12px; color: #465970; font-size: 12px; font-weight: 700; } .v2-track-rail-empty .semi-empty-description { max-width: 220px; margin-top: 6px; color: #8996a7; font-size: 9px; line-height: 1.55; } .v2-track-empty-state > .semi-card-body { display: block; padding: 0 !important; } .v2-track-empty-state .semi-empty { min-height: 248px; justify-content: center; padding: 24px 20px; } .v2-track-empty-state .semi-empty-image { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 18px; background: #edf5ff; color: #3476d2; font-size: 27px; } .v2-track-empty-state .semi-empty-title { margin-top: 13px; color: #34475e; font-size: 14px; font-weight: 750; } .v2-track-empty-state .semi-empty-description { max-width: 260px; margin-top: 6px; color: #7f8da0; font-size: 10px; line-height: 1.55; } .v2-track-empty-state .semi-empty-content { margin-top: 15px; } .v2-track-empty-state .semi-empty-content > .semi-button { height: 38px; border-radius: 8px; padding: 0 16px; } @media (max-width: 680px) { .v2-record-descriptions.semi-descriptions { padding: 8px 12px 3px; } .v2-record-descriptions .semi-descriptions-item { min-height: 38px; padding: 8px 0; } .v2-record-descriptions .semi-descriptions-item-th { width: 96px; } .v2-record-descriptions .semi-descriptions-key { font-size: 11px; } .v2-record-descriptions .semi-descriptions-value { font-size: 12px; } .v2-not-found.semi-card { width: calc(100% - 24px); } .v2-not-found .semi-empty { min-height: 330px; padding: 28px 18px; } .v2-not-found .semi-empty-title { font-size: 18px; } .v2-not-found .semi-empty-description { font-size: 12px; } .v2-track-overview-descriptions .semi-descriptions-item { min-height: 32px; padding: 7px 0; } .v2-track-overview-descriptions .semi-descriptions-key { font-size: 10px; } .v2-track-overview-descriptions .semi-descriptions-value { font-size: 11px; } .v2-track-rail-empty.semi-empty { min-height: 230px; } .v2-track-rail-empty .semi-empty-title { font-size: 13px; } .v2-track-rail-empty .semi-empty-description { font-size: 10px; } .v2-track-empty-state .semi-empty { min-height: 220px; padding: 20px 16px; } .v2-track-empty-state .semi-empty-title { font-size: 14px; } .v2-track-empty-state .semi-empty-description { font-size: 10px; } } /* Semi UI account editor: one card language for identity, menus and vehicle grants. */ .v2-user-list-loading { display: grid; min-height: 180px; place-items: center; color: #748399; } .v2-user-list-loading .semi-spin-wrapper { display: grid; justify-items: center; gap: 8px; } .v2-user-list-loading .semi-spin-tip { color: #7d8b9d; font-size: 11px; } .v2-user-list-empty.semi-empty { min-height: 210px; justify-content: center; padding: 22px 16px; } .v2-user-list-empty .semi-empty-image { width: 64px; height: 52px; } .v2-user-list-empty .semi-empty-title { color: #42556d; font-size: 12px; font-weight: 700; } .v2-user-list-empty .semi-empty-description { max-width: 210px; color: #8492a4; font-size: 9px; line-height: 1.55; } .v2-user-editor-empty.semi-empty { min-height: 620px; justify-content: center; padding: 36px 24px; } .v2-user-editor-empty .semi-empty-image { width: 92px; height: 76px; } .v2-user-editor-empty .semi-empty-title { color: #354960; font-size: 18px; font-weight: 750; } .v2-user-editor-empty .semi-empty-description { margin-top: 7px; color: #8190a3; font-size: 12px; } .v2-user-editor-empty .semi-empty-content { margin-top: 19px; } .v2-user-editor-empty .semi-empty-content > .semi-button { height: 40px; border-radius: 8px; padding: 0 18px; box-shadow: 0 7px 16px rgba(18,104,243,.16); font-weight: 700; } .v2-user-editor form { display: flex; flex-direction: column; gap: 12px; background: #f7f9fc; } .v2-user-editor-title { flex: 0 0 auto; border: 1px solid #dfe6ef; border-radius: 11px; background: linear-gradient(100deg,#fff 0%,#f7faff 100%); padding: 16px 18px; } .v2-user-editor-section.semi-card { flex: 0 0 auto; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,80,.035); } .v2-user-editor-section > .semi-card-header { min-height: 48px; border-bottom-color: #e7edf4; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); padding: 0 16px; } .v2-user-editor-section > .semi-card-header .semi-card-header-wrapper-title h6, .v2-user-editor-section > .semi-card-header .semi-card-header-wrapper-title > span { color: #2f4259; font-size: 13px; font-weight: 750; } .v2-user-editor-section > .semi-card-body { padding: 16px; } .v2-user-section-title { display: inline-flex; align-items: center; gap: 9px; } .v2-user-section-title .semi-tag { min-height: 22px; border-radius: 999px; font-size: 9px; font-weight: 600; } .v2-user-editor-section > .semi-card-header .semi-card-header-wrapper-extra > .semi-button { height: 30px; border-radius: 7px; color: #687990; } .v2-user-menu-section .v2-menu-permissions label { min-height: 70px; border-color: #dfe6ef; border-radius: 9px; background: #fff; padding: 12px; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-user-menu-section .v2-menu-permissions label:hover { border-color: #b9cce5; box-shadow: 0 5px 14px rgba(31,55,86,.055); transform: translateY(-1px); } .v2-user-menu-section .v2-menu-permissions label.is-selected { border-color: #aac8f7; background: linear-gradient(120deg,#f0f6ff 0%,#f8fbff 100%); box-shadow: inset 3px 0 var(--v2-blue); } .v2-user-menu-section .v2-menu-permissions b { color: #31455d; font-size: 12px; } .v2-user-menu-section .v2-menu-permissions small { color: #7c8b9e; font-size: 10px; } .v2-user-vehicle-empty.semi-empty { min-height: 136px; justify-content: center; margin-top: 12px; border: 1px dashed #d8e1ec; border-radius: 9px; background: #fafbfd; padding: 16px; } .v2-user-vehicle-empty .semi-empty-image { display: none; } .v2-user-vehicle-empty .semi-empty-title { color: #53657c; font-size: 12px; font-weight: 700; } .v2-user-vehicle-empty .semi-empty-description { color: #8a97a8; font-size: 10px; } .v2-user-editor form > footer { flex: 0 0 auto; margin-top: 2px; } @media (max-width: 680px) { .v2-user-list-loading, .v2-user-list-empty.semi-empty { min-width: 230px; min-height: 64px; flex: 0 0 230px; } .v2-user-list-empty .semi-empty-image { display: none; } .v2-user-list-empty.semi-empty { align-items: flex-start; justify-content: center; padding: 8px 12px; } .v2-user-list-empty .semi-empty-title { margin: 0; font-size: 12px; } .v2-user-list-empty .semi-empty-description { margin-top: 2px; font-size: 9px; } .v2-user-editor-empty.semi-empty { min-height: 360px; padding: 26px 18px; } .v2-user-editor-empty .semi-empty-title { font-size: 16px; } .v2-user-editor-empty .semi-empty-description { font-size: 11px; } .v2-user-editor form { gap: 9px; background: #f5f7fa; } .v2-user-editor-title { border-radius: 9px; padding: 13px 12px; } .v2-user-editor-title h3 { font-size: 18px; line-height: 1.25; } .v2-user-editor-title > div { min-width: 0; } .v2-user-editor-title .v2-user-status { flex: 0 0 auto; } .v2-user-editor-title .v2-user-status > span { display: none; } .v2-user-editor-section.semi-card { border-radius: 9px; } .v2-user-editor-section > .semi-card-header { min-height: 46px; padding: 0 12px; } .v2-user-editor-section > .semi-card-body { padding: 12px; } .v2-user-editor-section > .semi-card-header .semi-card-header-wrapper-title h6, .v2-user-editor-section > .semi-card-header .semi-card-header-wrapper-title > span { font-size: 13px; } .v2-user-menu-section .v2-menu-permissions label { min-height: 72px; padding: 12px; } .v2-user-menu-section .v2-menu-permissions label:hover { transform: none; } .v2-user-vehicle-empty.semi-empty { min-height: 118px; } } /* Semi UI operations health: consistent status, evidence, action and acceptance surfaces. */ .v2-ops-link-list { display: grid; gap: 0; } .v2-ops-link-card.semi-card { min-width: 0; border: 0; border-bottom: 1px solid #e8edf3; border-radius: 0; background: #fff; box-shadow: none; } .v2-ops-link-card:last-child { border-bottom: 0; } .v2-ops-link-card > .semi-card-body { display: grid; min-height: 58px; grid-template-columns: minmax(130px,.65fr) minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 15px; } .v2-ops-link-status { display: flex; min-width: 0; align-items: center; gap: 9px; } .v2-ops-link-status > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.12); } .v2-ops-link-card.is-ok .v2-ops-link-status > i { background: var(--v2-green); box-shadow: 0 0 0 4px rgba(26,160,109,.11); } .v2-ops-link-card.is-warning .v2-ops-link-status > i { background: var(--v2-orange); box-shadow: 0 0 0 4px rgba(232,161,43,.12); } .v2-ops-link-card.is-error .v2-ops-link-status > i { background: var(--v2-red); box-shadow: 0 0 0 4px rgba(225,76,72,.1); } .v2-ops-link-status strong { overflow: hidden; color: #32465e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-ops-link-card p { min-width: 0; margin: 0; overflow: hidden; color: #748398; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .v2-ops-link-card .v2-ops-health-tag.semi-tag { min-height: 24px; border-radius: 999px; } .v2-ops-link-empty.semi-empty { min-height: 190px; justify-content: center; padding: 20px; } .v2-ops-link-empty .semi-empty-image { width: 66px; height: 54px; } .v2-ops-link-empty .semi-empty-title { color: #4c5f75; font-size: 12px; font-weight: 700; } .v2-ops-link-empty .semi-empty-description { color: #8794a5; font-size: 9px; } .v2-ops-runtime-descriptions.semi-descriptions { padding: 9px 15px 3px; } .v2-ops-runtime-descriptions .semi-descriptions-item { min-height: 38px; border-bottom: 1px solid #edf1f5; padding: 7px 0; } .v2-ops-runtime-descriptions .semi-descriptions-item:last-child { border-bottom: 0; } .v2-ops-runtime-descriptions .semi-descriptions-item-th { width: 122px; padding-right: 12px; } .v2-ops-runtime-descriptions .semi-descriptions-key { color: #748398; font-size: 10px; font-weight: 500; } .v2-ops-runtime-descriptions .semi-descriptions-value { color: #34475e; font-size: 11px; font-weight: 650; text-align: right; } .v2-ops-runtime-descriptions .v2-ops-health-tag.semi-tag { min-height: 23px; border-radius: 999px; } .v2-ops-capacity-findings { display: grid; gap: 7px; padding: 6px 13px 13px; } .v2-ops-capacity-finding.semi-card { border: 1px solid #efd6a6; border-radius: 8px; background: #fffaf1; box-shadow: none; } .v2-ops-capacity-finding > .semi-card-body { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; } .v2-ops-capacity-finding p { margin: 2px 0 0; color: #8a5e18; font-size: 9px; line-height: 1.55; } .v2-ops-capacity-empty.semi-empty { min-height: 112px; justify-content: center; margin: 5px 13px 13px; border: 1px solid #d7ebe3; border-radius: 8px; background: #f4fbf8; padding: 12px; } .v2-ops-capacity-empty .semi-empty-image { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e3f6ee; color: #16825d; font-size: 19px; } .v2-ops-capacity-empty .semi-empty-title { margin-top: 7px; color: #28745c; font-size: 11px; font-weight: 700; } .v2-ops-capacity-empty .semi-empty-description { margin-top: 2px; color: #6d9185; font-size: 9px; } .v2-ops-source-list.semi-card-group { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 12px; background: #f7f9fc; } .v2-ops-source-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(31,53,80,.045); } .v2-ops-source-card.is-ok { border-color: #cce8dd; } .v2-ops-source-card.is-warning { border-color: #ecd7ad; } .v2-ops-source-card.is-error { border-color: #efc9c7; } .v2-ops-source-card > .semi-card-header { min-height: 50px; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); padding: 0 13px; } .v2-ops-source-title { display: flex; min-width: 0; align-items: center; gap: 7px; } .v2-ops-source-title .semi-tag { flex: 0 0 auto; min-height: 22px; border-radius: 6px; font-size: 9px; } .v2-ops-source-title small { overflow: hidden; color: #718197; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-ops-source-card > .semi-card-header .v2-ops-health-tag.semi-tag { min-height: 23px; border-radius: 999px; font-size: 8px; } .v2-ops-source-card > .semi-card-body { display: grid; gap: 0; padding: 0; } .v2-ops-source-evidence, .v2-ops-source-action { min-height: 88px; padding: 12px 13px; } .v2-ops-source-action { border-top: 1px solid #e9eef4; background: #fbfcfe; } .v2-ops-source-evidence strong, .v2-ops-source-action strong { color: #41556d; font-size: 9px; } .v2-ops-source-evidence p, .v2-ops-source-action p { margin: 6px 0 0; color: #6d7d91; font-size: 9px; line-height: 1.6; } .v2-ops-source-card > .semi-card-body > footer { display: grid; min-height: 82px; grid-template-columns: auto minmax(0,1fr); align-items: flex-start; gap: 8px; border-top: 1px solid #e9eef4; padding: 11px 13px; background: #f5faf8; } .v2-ops-source-card footer .semi-tag { min-height: 22px; border-radius: 999px; font-size: 8px; } .v2-ops-source-card footer span { color: #557567; font-size: 9px; line-height: 1.55; } .v2-ops-source-empty.semi-empty, .v2-ops-source-loading { min-height: 250px; justify-content: center; padding: 28px; background: #f8fafc; } .v2-ops-source-loading { display: grid; place-items: center; } .v2-ops-source-empty .semi-empty-title { color: #4b5e74; font-size: 13px; font-weight: 700; } .v2-ops-source-empty .semi-empty-description, .v2-ops-source-loading .semi-spin-tip { color: #8491a3; font-size: 10px; } @media (max-width: 1100px) { .v2-ops-source-list.semi-card-group { grid-template-columns: 1fr; } } @media (max-width: 680px) { .v2-ops-link-card > .semi-card-body { min-height: 72px; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; padding: 10px 12px; } .v2-ops-link-card p { grid-column: 1 / -1; font-size: 10px; white-space: normal; } .v2-ops-link-status strong { font-size: 12px; } .v2-ops-runtime-descriptions.semi-descriptions { padding: 8px 12px 3px; } .v2-ops-runtime-descriptions .semi-descriptions-item { min-height: 42px; } .v2-ops-runtime-descriptions .semi-descriptions-key, .v2-ops-runtime-descriptions .semi-descriptions-value { font-size: 11px; } .v2-ops-source-list.semi-card-group { display: flex; overflow-x: auto; grid-template-columns: none; gap: 8px; padding: 10px; scroll-snap-type: x proximity; } .v2-ops-source-card.semi-card { min-width: min(84vw,330px); flex: 0 0 min(84vw,330px); scroll-snap-align: start; } .v2-ops-source-evidence, .v2-ops-source-action { min-height: 98px; } .v2-ops-source-evidence strong, .v2-ops-source-action strong, .v2-ops-source-evidence p, .v2-ops-source-action p, .v2-ops-source-card footer span { font-size: 10px; } } /* Semi UI access inspector: one vocabulary for vehicle facts, protocol evidence and async states. */ .v2-access-inspector-summary.semi-descriptions { border-bottom: 1px solid var(--v2-border); padding: 10px 14px 8px; } .v2-access-inspector-summary .semi-descriptions-item { min-height: 42px; border-bottom: 1px solid #edf1f5; padding: 7px 0; } .v2-access-inspector-summary .semi-descriptions-item:last-child { border-bottom: 0; } .v2-access-inspector-summary .semi-descriptions-item-th { width: 92px; padding-right: 10px; } .v2-access-inspector-summary .semi-descriptions-key { color: #7c899b; font-size: 10px; font-weight: 500; } .v2-access-inspector-summary .semi-descriptions-value { min-width: 0; color: #3d4e64; font-size: 11px; font-weight: 650; overflow-wrap: anywhere; } .v2-access-inspector-summary .v2-access-connection { display: flex; align-items: center; gap: 7px; } .v2-access-inspector-summary .v2-access-connection span { display: none; } .v2-access-inspector-summary .v2-access-connection-tag.semi-tag { flex: 0 0 auto; } .v2-access-protocol-details.semi-card-group { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 12px; background: #f7f9fc; } .v2-access-protocol-detail.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgba(31,53,80,.035); } .v2-access-protocol-detail.is-online { border-color: #cfe8de; } .v2-access-protocol-detail.is-offline, .v2-access-protocol-detail.is-unknown { border-color: #ecd9b6; } .v2-access-protocol-detail > .semi-card-header { min-height: 42px; background: linear-gradient(180deg,#fff 0%,#fafbfd 100%); padding: 0 11px; } .v2-access-protocol-detail > .semi-card-header .semi-card-header-wrapper-title strong { color: #354960; font-size: 12px; } .v2-access-protocol-detail .v2-access-protocol-tag.semi-tag { min-height: 23px; border-radius: 999px; font-size: 9px; } .v2-access-protocol-detail .v2-access-protocol-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .v2-access-protocol-detail.is-missing .v2-access-protocol-tag i { border: 1px solid currentColor; background: transparent; } .v2-access-protocol-descriptions.semi-descriptions { padding: 7px 11px 3px; } .v2-access-protocol-descriptions .semi-descriptions-item { min-height: 31px; padding: 5px 0; } .v2-access-protocol-descriptions .semi-descriptions-item-th { width: 84px; padding-right: 8px; } .v2-access-protocol-descriptions .semi-descriptions-key { color: #8390a2; font-size: 9px; font-weight: 500; } .v2-access-protocol-descriptions .semi-descriptions-value, .v2-access-protocol-descriptions .semi-typography { overflow: hidden; color: #43546a; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .v2-access-protocol-descriptions .semi-typography-danger { color: var(--v2-red); } .v2-access-protocol-evidence { margin: 0; border-top: 1px solid #e9eef4; background: #fbfcfe; padding: 8px 11px; color: #77869a; font-size: 9px; line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .v2-access-loading { position: absolute; z-index: 4; inset: 42px 0 auto; display: grid; min-height: 66px; place-items: center; background: rgba(255,255,255,.9); backdrop-filter: blur(3px); } .v2-access-loading .semi-spin-tip { color: #718197; font-size: 10px; font-weight: 600; } .v2-access-empty.semi-empty { min-height: 260px; justify-content: center; padding: 24px; } .v2-access-empty .semi-empty-image { width: 72px; height: 58px; } .v2-access-empty .semi-empty-title { color: #4b5e75; font-size: 13px; font-weight: 700; } .v2-access-empty .semi-empty-description { max-width: 260px; color: #8592a4; font-size: 10px; line-height: 1.5; } @media (max-width: 680px) { .v2-access-inspector-summary.semi-descriptions { padding: 8px 12px 6px; } .v2-access-inspector-summary .semi-descriptions-item { min-height: 44px; } .v2-access-inspector-summary .semi-descriptions-item-th { width: 80px; } .v2-access-inspector-summary .semi-descriptions-key, .v2-access-inspector-summary .semi-descriptions-value { font-size: 11px; } .v2-access-protocol-details.semi-card-group { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 8px; padding: 10px; scroll-snap-type: x proximity; } .v2-access-protocol-detail.semi-card { min-width: min(82vw,320px); flex: 0 0 min(82vw,320px); scroll-snap-align: start; } .v2-access-protocol-detail > .semi-card-header { min-height: 44px; } .v2-access-protocol-detail > .semi-card-header .semi-card-header-wrapper-title strong { font-size: 13px; } .v2-access-protocol-descriptions .semi-descriptions-item { min-height: 34px; } .v2-access-protocol-descriptions .semi-descriptions-key, .v2-access-protocol-descriptions .semi-descriptions-value, .v2-access-protocol-descriptions .semi-typography, .v2-access-protocol-evidence { font-size: 10px; } .v2-access-empty.semi-empty { min-height: 300px; } } /* Semi UI history evidence: consistent facts, jobs, progress and empty states. */ .v2-history-chart-empty.semi-empty, .v2-history-chart-loading { min-height: 128px; flex: 1; justify-content: center; padding: 14px 20px; } .v2-history-chart-loading { display: grid; place-items: center; } .v2-history-chart-empty .semi-empty-image { display: none; } .v2-history-chart-empty .semi-empty-title { margin: 0; color: #506279; font-size: 12px; font-weight: 700; } .v2-history-chart-empty .semi-empty-description, .v2-history-chart-loading .semi-spin-tip { max-width: 420px; margin-top: 4px; color: #8491a3; font-size: 10px; line-height: 1.55; } .v2-history-chart-empty.is-error .semi-empty-title { color: #b64d4d; } .v2-history-evidence-descriptions.semi-descriptions { border-bottom: 1px solid var(--v2-border); padding: 8px 12px 5px; } .v2-history-evidence-descriptions .semi-descriptions-item { min-height: 34px; border-bottom: 1px solid #edf1f5; padding: 5px 0; } .v2-history-evidence-descriptions .semi-descriptions-item:last-child { border-bottom: 0; } .v2-history-evidence-descriptions .semi-descriptions-item-th { width: 76px; padding-right: 8px; } .v2-history-evidence-descriptions .semi-descriptions-key { color: #7d8a9d; font-size: 9px; font-weight: 500; } .v2-history-evidence-descriptions .semi-descriptions-value { color: #405168; font-size: 10px; font-weight: 600; overflow-wrap: anywhere; } .v2-history-evidence-descriptions .semi-tag, .v2-history-quality-tag.semi-tag { min-height: 22px; border-radius: 999px; font-size: 8px; } .v2-evidence-section-title { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 0 12px; } .v2-evidence-section-title strong { color: #405168; font-size: 10px; } .v2-evidence-section-title .semi-tag { min-height: 21px; border-radius: 999px; font-size: 8px; } .v2-evidence-values.semi-descriptions { max-height: 360px; overflow: auto; border-top: 1px solid #edf1f5; padding: 3px 12px 7px; } .v2-evidence-values .semi-descriptions-item { min-height: 37px; border-bottom: 1px solid #edf1f5; padding: 6px 0; } .v2-evidence-values .semi-descriptions-item:last-child { border-bottom: 0; } .v2-evidence-values .semi-descriptions-item-th { width: 122px; padding-right: 8px; } .v2-evidence-values .semi-descriptions-key > span { display: grid; min-width: 0; gap: 2px; color: #586a81; font-size: 9px; font-weight: 600; } .v2-evidence-values .semi-descriptions-key small { overflow: hidden; color: #9aa6b5; font-size: 7px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } .v2-evidence-values .semi-descriptions-value { color: #33465d; font-size: 10px; font-weight: 700; text-align: right; } .v2-evidence-values-empty.semi-empty { min-height: 106px; justify-content: center; border-top: 1px solid #edf1f5; padding: 12px; } .v2-evidence-values-empty .semi-empty-image { display: none; } .v2-evidence-values-empty .semi-empty-title { margin: 0; color: #5b6d82; font-size: 10px; font-weight: 700; } .v2-evidence-values-empty .semi-empty-description { margin-top: 3px; color: #8a97a8; font-size: 8px; } .v2-history-evidence > .semi-card-body > footer .semi-tag { flex: 0 0 auto; min-height: 22px; border-radius: 999px; font-size: 8px; } .v2-history-evidence > .semi-card-body > footer .semi-typography { min-width: 0; color: var(--v2-blue); font-size: 9px; font-weight: 600; } .v2-history-side-empty.semi-empty, .v2-history-side-loading { min-height: 154px; justify-content: center; padding: 18px 14px; } .v2-history-side-loading { display: grid; place-items: center; } .v2-history-side-empty .semi-empty-image { width: 58px; height: 46px; } .v2-history-side-empty .semi-empty-title { color: #506279; font-size: 11px; font-weight: 700; } .v2-history-side-empty .semi-empty-description, .v2-history-side-loading .semi-spin-tip { color: #8995a6; font-size: 8px; line-height: 1.5; } .v2-history-detail-sidesheet .semi-sidesheet-inner, .v2-history-export-sidesheet .semi-sidesheet-inner { width: min(100vw, 460px) !important; max-width: 100vw; background: #f4f7fb; } .v2-history-detail-sidesheet .semi-sidesheet-header, .v2-history-export-sidesheet .semi-sidesheet-header { min-height: 68px; border-bottom: 1px solid #dfe6ef; background: rgba(255,255,255,.96); padding: calc(10px + env(safe-area-inset-top)) 16px 10px; backdrop-filter: blur(14px); } .v2-history-detail-sidesheet .semi-sidesheet-title, .v2-history-export-sidesheet .semi-sidesheet-title { min-width: 0; } .v2-history-mobile-sheet-title { display: grid; min-width: 0; gap: 3px; } .v2-history-mobile-sheet-title strong { color: #30445c; font-size: 16px; font-weight: 750; } .v2-history-mobile-sheet-title span { overflow: hidden; color: #7d8b9e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-history-detail-sidesheet .semi-sidesheet-close, .v2-history-export-sidesheet .semi-sidesheet-close { width: 38px; height: 38px; border-radius: 10px; color: #607086; } .v2-history-detail-sidesheet .semi-sidesheet-body, .v2-history-export-sidesheet .semi-sidesheet-body { overflow: auto; overscroll-behavior: contain; padding: 10px 10px calc(18px + env(safe-area-inset-bottom)); } .v2-history-detail-sidesheet .v2-history-evidence.semi-card, .v2-history-export-sidesheet .v2-export-jobs.semi-card { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(31,48,70,.08); } .v2-history-detail-sidesheet .v2-evidence-values.semi-descriptions { max-height: none; } .v2-history-export-sidesheet .v2-export-jobs > .semi-card-body > .v2-export-job-list { max-height: none; } .v2-export-jobs > .semi-card-body > .v2-export-job-list { max-height: 430px; overflow: auto; background: #f7f9fc; padding: 8px; } .v2-export-job-list > .semi-card-group { display: grid; grid-template-columns: 1fr; gap: 7px; } .v2-export-job-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; box-shadow: none; } .v2-export-job-card.is-running { border-color: #c8dcfa; } .v2-export-job-card.is-completed { border-color: #cce7dc; } .v2-export-job-card.is-failed { border-color: #edc9c8; } .v2-export-job-card > .semi-card-header { min-height: 38px; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); padding: 0 9px; } .v2-export-job-name { display: block; max-width: 168px; overflow: hidden; color: #405168; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-export-job-card > .semi-card-header .semi-tag { min-height: 21px; border-radius: 999px; font-size: 7px; } .v2-export-job-card > .semi-card-body { display: grid; gap: 7px; padding: 9px; } .v2-export-job-summary { display: grid; min-width: 0; gap: 4px; } .v2-export-job-summary strong { color: #46586f; font-size: 9px; line-height: 1.45; } .v2-export-job-summary small { overflow: hidden; color: #8390a2; font-size: 7px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .v2-export-job-progress.semi-progress { margin-top: 1px; } .v2-export-job-progress .semi-progress-line-text { color: #6d7c90; font-size: 8px; } .v2-export-job-card .v2-export-download.semi-button { width: fit-content; height: 26px; justify-self: end; color: var(--v2-blue); font-size: 8px; } .v2-history-loading { position: sticky; left: 0; display: grid; min-height: 120px; place-items: center; } .v2-history-loading .semi-spin-tip { color: #6e7f94; font-size: 10px; font-weight: 600; } .v2-history-empty.semi-empty { position: sticky; left: 0; min-height: 260px; justify-content: center; padding: 22px; } .v2-history-empty .semi-empty-image { width: 72px; height: 58px; } .v2-history-empty .semi-empty-title { color: #4c5f76; font-size: 13px; font-weight: 700; } .v2-history-empty .semi-empty-description { max-width: 300px; color: #8794a5; font-size: 10px; line-height: 1.5; } @media (max-width: 680px) { .v2-history-chart-empty.semi-empty, .v2-history-chart-loading { min-height: 140px; } .v2-history-side-empty.semi-empty { min-height: 180px; } .v2-history-evidence-descriptions .semi-descriptions-item { min-height: 40px; } .v2-history-evidence-descriptions .semi-descriptions-key, .v2-history-evidence-descriptions .semi-descriptions-value { font-size: 10px; } .v2-evidence-section-title strong { font-size: 11px; } .v2-evidence-values .semi-descriptions-item { min-height: 42px; } .v2-evidence-values .semi-descriptions-key > span, .v2-evidence-values .semi-descriptions-value { font-size: 10px; } .v2-export-jobs > .semi-card-body > .v2-export-job-list { max-height: none; } .v2-export-job-card > .semi-card-header .semi-typography { max-width: 210px; font-size: 10px; } .v2-export-job-summary strong { font-size: 10px; } .v2-export-job-summary small { font-size: 8px; } } /* Semi UI alert notifications: card-based delivery records and explicit channel readiness. */ .v2-alert-loading { position: absolute; z-index: 4; inset: 42px 0 auto; display: grid; min-height: 66px; place-items: center; background: rgba(255,255,255,.9); backdrop-filter: blur(3px); } .v2-alert-loading .semi-spin-tip { color: #6f8095; font-size: 10px; font-weight: 600; } .v2-alert-empty.semi-empty { position: sticky; left: 0; min-height: 260px; justify-content: center; padding: 22px; } .v2-alert-empty .semi-empty-image { width: 72px; height: 58px; } .v2-alert-empty .semi-empty-title { color: #4c5f76; font-size: 13px; font-weight: 700; } .v2-alert-empty .semi-empty-description { max-width: 320px; color: #8794a5; font-size: 10px; line-height: 1.5; } .v2-alert-notification-list { background: #f6f8fb; padding: 10px; } .v2-alert-notification-cards.semi-card-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .v2-alert-notification-card.semi-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(31,53,80,.04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-alert-notification-card.is-unread { border-color: #c8dcfa; box-shadow: inset 3px 0 #2d7ef7, 0 5px 17px rgba(38,105,203,.06); } .v2-alert-notification-card.is-read { opacity: .76; } .v2-alert-notification-card:hover { border-color: #b9cbe2; box-shadow: 0 7px 19px rgba(31,53,80,.07); transform: translateY(-1px); } .v2-alert-notification-card > .semi-card-header { min-height: 46px; background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%); padding: 0 11px; } .v2-alert-notification-title { display: flex; min-width: 0; align-items: center; gap: 7px; } .v2-alert-notification-title .v2-alert-severity.semi-tag { flex: 0 0 auto; min-height: 22px; font-size: 8px; } .v2-alert-notification-title > span:last-child { min-width: 0; overflow: hidden; color: #34465d; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-notification-card > .semi-card-header .semi-card-header-wrapper-extra > .semi-tag { min-height: 22px; border-radius: 999px; font-size: 8px; } .v2-alert-notification-card > .semi-card-body { display: grid; min-height: 104px; gap: 8px; padding: 0; } .v2-alert-notification-content { margin: 0; padding: 11px 12px 0; color: #65758a; font-size: 10px; line-height: 1.6; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .v2-alert-notification-card > .semi-card-body > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e9eef4; padding: 5px 9px 5px 12px; background: #fbfcfe; } .v2-alert-notification-card footer .semi-typography { color: #8b97a8; font-size: 9px; } .v2-alert-notification-card footer .semi-button { height: 28px; border-radius: 7px; color: var(--v2-blue); font-size: 9px; } .v2-alert-notification-loading, .v2-alert-notification-empty.semi-empty { min-height: 280px; justify-content: center; padding: 26px; } .v2-alert-notification-loading { display: grid; place-items: center; } .v2-alert-notification-loading .semi-spin-tip { color: #7c899b; font-size: 10px; } .v2-alert-notification-empty .semi-empty-image { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #edf4ff; color: #347be5; font-size: 24px; } .v2-alert-notification-empty .semi-empty-title { color: #4c5f76; font-size: 13px; font-weight: 700; } .v2-alert-notification-empty .semi-empty-description { color: #8794a5; font-size: 10px; } .v2-alert-channel-card.semi-card { min-width: 0; flex: 0 0 auto; border: 0; border-top: 1px solid #dfe6ef; border-radius: 0; background: #fff; box-shadow: none; } .v2-alert-channel-card > .semi-card-header { min-height: 40px; padding: 0 14px; } .v2-alert-channel-card > .semi-card-header strong { color: #4c5e74; font-size: 10px; } .v2-alert-channel-descriptions.semi-descriptions { padding: 5px 14px 9px; } .v2-alert-channel-descriptions .semi-descriptions-item { min-height: 31px; padding: 5px 0; } .v2-alert-channel-descriptions .semi-descriptions-item-th { width: 150px; padding-right: 10px; } .v2-alert-channel-descriptions .semi-descriptions-key { color: #718096; font-size: 9px; } .v2-alert-channel-descriptions .semi-descriptions-value { text-align: right; } .v2-alert-channel-descriptions .semi-tag { min-height: 22px; border-radius: 999px; font-size: 8px; } @media (max-width: 900px) { .v2-alert-notification-cards.semi-card-group { grid-template-columns: 1fr; } } @media (max-width: 680px) { .v2-alert-notification-list { padding: 8px; } .v2-alert-notification-card:hover { transform: none; } .v2-alert-notification-card > .semi-card-header { min-height: 48px; padding: 0 10px; } .v2-alert-notification-title > span:last-child { font-size: 12px; } .v2-alert-notification-content { font-size: 11px; } .v2-alert-notification-card footer .semi-typography, .v2-alert-notification-card footer .semi-button { font-size: 10px; } .v2-alert-channel-card > .semi-card-header { min-height: 44px; padding: 0 12px; } .v2-alert-channel-card > .semi-card-header strong { font-size: 11px; } .v2-alert-channel-descriptions.semi-descriptions { padding: 5px 12px 9px; } .v2-alert-channel-descriptions .semi-descriptions-item { min-height: 36px; } .v2-alert-channel-descriptions .semi-descriptions-item-th { width: 135px; } .v2-alert-channel-descriptions .semi-descriptions-key, .v2-alert-channel-descriptions .semi-descriptions-value { font-size: 10px; } } /* Semi UI reconciliation queue: desktop data grid and mobile evidence cards. */ .v2-reconcile-table.semi-table-wrapper { width: 100%; min-width: 0; border-collapse: initial; color: #33475e; } .v2-reconcile-table .semi-table-container { border: 0; } .v2-reconcile-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 40px; border-bottom: 1px solid #dfe7f0; background: #f7f9fc; padding: 0 11px; color: #718095; font-size: 10px; font-weight: 700; } .v2-reconcile-table .semi-table-tbody > .semi-table-row { cursor: pointer; outline: none; transition: background-color .14s ease, box-shadow .14s ease; } .v2-reconcile-table .semi-table-tbody > .semi-table-row:hover, .v2-reconcile-table .semi-table-tbody > .semi-table-row:focus-visible { background: #f7fbff; } .v2-reconcile-table .semi-table-tbody > .semi-table-row.is-selected { background: #eef6ff; box-shadow: inset 3px 0 #3478d4; } .v2-reconcile-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 64px; border-bottom: 1px solid #edf1f6; padding: 8px 11px; vertical-align: middle; } .v2-reconcile-cell { display: grid; min-width: 0; gap: 4px; } .v2-reconcile-cell strong, .v2-reconcile-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-reconcile-cell strong { color: #2f4359; font-size: 10px; font-weight: 700; } .v2-reconcile-cell small { color: #8290a2; font-size: 8px; } .v2-reconcile-mobile-list { display: none; } .v2-reconcile-loading { display: grid; min-height: 180px; place-items: center; } .v2-reconcile-loading .semi-spin-tip, .v2-reconcile-detail-loading .semi-spin-tip { color: #718197; font-size: 10px; font-weight: 600; } .v2-reconcile-empty.semi-empty { min-height: 220px; justify-content: center; padding: 24px; } .v2-reconcile-empty .semi-empty-image { width: 68px; height: 54px; } .v2-reconcile-empty .semi-empty-title { color: #4c5f76; font-size: 12px; font-weight: 700; } .v2-reconcile-empty .semi-empty-description { max-width: 300px; color: #8794a5; font-size: 9px; line-height: 1.5; } .v2-reconcile-detail-loading { display: grid; min-height: 100%; place-items: center; } @media (max-width: 680px) { .v2-reconcile-table.semi-table-wrapper { display: none; } .v2-reconcile-mobile-list { display: grid; gap: 8px; padding: 8px; background: #f6f8fb; } .v2-reconcile-mobile-card.semi-card { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 11px; background: #fff; box-shadow: 0 4px 14px rgba(31,53,80,.04); } .v2-reconcile-mobile-card.is-selected { border-color: #bcd4f6; box-shadow: inset 3px 0 #3478d4, 0 5px 16px rgba(47,111,198,.08); } .v2-reconcile-mobile-action.semi-button { width: 100%; height: auto; min-height: 172px; border-radius: 0; padding: 0; color: inherit; text-align: left; } .v2-reconcile-mobile-action > .semi-button-content { width: 100%; } .v2-reconcile-mobile-content { display: grid; width: 100%; gap: 6px; padding: 11px 12px 9px; } .v2-reconcile-mobile-content > header, .v2-reconcile-mobile-content > header > span, .v2-reconcile-mobile-content > footer { display: flex; align-items: center; } .v2-reconcile-mobile-content > header { justify-content: space-between; gap: 8px; } .v2-reconcile-mobile-content > header > span { gap: 5px; } .v2-reconcile-mobile-content > header small { color: #8a97a8; font-size: 9px; } .v2-reconcile-mobile-content > strong { color: #31465d; font-size: 12px; line-height: 1.35; } .v2-reconcile-mobile-content > p { margin: 0; color: #78889b; font-size: 10px; } .v2-reconcile-mobile-content > dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 2px 0 0; } .v2-reconcile-mobile-content > dl > div { min-width: 0; border-radius: 7px; background: #f5f8fb; padding: 7px 8px; } .v2-reconcile-mobile-content dt { color: #8a97a8; font-size: 8px; } .v2-reconcile-mobile-content dd { overflow: hidden; margin: 3px 0 0; color: #52667d; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .v2-reconcile-mobile-content > footer { min-height: 29px; justify-content: flex-end; gap: 4px; border-top: 1px solid #edf1f5; color: #3478d4; font-size: 10px; } .v2-reconcile-table-wrap { min-height: 280px; overflow: visible; } .v2-reconcile-empty.semi-empty { min-height: 260px; } } /* Semi UI mileage matrix: fixed vehicle and total columns with one responsive data grid. */ .v2-mileage-table.semi-table-wrapper { width: 100%; min-width: 0; border-collapse: initial; border-spacing: initial; font-size: 11px; } .v2-mileage-table .semi-table-container { border: 0; } .v2-mileage-table table { min-width: 100%; } .v2-mileage-table .semi-table-body { overflow: auto !important; overscroll-behavior: contain; scrollbar-width: thin; } .v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 46px; border-bottom: 1px solid #dfe6ef; background: #f5f8fc; padding: 0 14px; color: #526279; font-size: 10px; font-weight: 700; white-space: nowrap; } .v2-mileage-table .semi-table-tbody > .semi-table-row { transition: background-color .14s ease; } .v2-mileage-table .semi-table-tbody > .semi-table-row:hover { background: #f8fbff; } .v2-mileage-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 56px; border-bottom: 1px solid #e8edf3; padding: 0 14px; color: #46556a; white-space: nowrap; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-number { text-align: right; font-variant-numeric: tabular-nums; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-date { text-align: center; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-plate, .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).semi-table-cell-fixed-left { background: #fff; } .v2-mileage-table.semi-table-wrapper :is(.semi-table-row-head,.semi-table-row-cell).is-plate { position: sticky; z-index: 3; left: 0; } .v2-mileage-table .semi-table-row-head.is-plate { z-index: 5; background: #f7f9fc; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-vin { border-right: 1px solid #d8e0ea; box-shadow: 5px 0 10px rgba(15,23,42,.025); } .v2-mileage-table.semi-table-wrapper :is(.semi-table-row-head,.semi-table-row-cell).is-total, .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).semi-table-cell-fixed-right { position: sticky; z-index: 3; right: 0; border-left: 1px solid #d8e0ea; background: #fbfdff; box-shadow: -5px 0 10px rgba(15,23,42,.025); } .v2-mileage-table .semi-table-row-head.is-total { z-index: 5; background: #f1f6fe; color: #315f9f; } .v2-mileage-table .semi-table-row-cell.is-daily { color: #28496f; font-size: 10px; font-weight: 650; } .v2-mileage-table .semi-table-row-cell.is-empty { color: #b2bcc9; text-align: center; } .v2-mileage-table .semi-table-row-cell.is-period { color: #135fcb; font-size: 11px; font-weight: 800; } .v2-mileage-table .semi-table-row-cell strong { color: #263448; } .v2-mileage-table .semi-table-row-cell code { color: #69778b; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; } .v2-mileage-loading { flex-direction: column; gap: 7px; } .v2-mileage-loading .semi-spin-tip { color: #52637a; font-size: 11px; font-weight: 700; } .v2-mileage-loading > small { color: #8491a3; font-size: 9px; } .v2-mileage-empty.semi-empty { min-height: 260px; justify-content: center; padding: 24px; } .v2-mileage-empty .semi-empty-image { width: 72px; height: 58px; } .v2-mileage-empty .semi-empty-title { color: #4c5f76; font-size: 13px; font-weight: 700; } .v2-mileage-empty .semi-empty-description { color: #8794a5; font-size: 10px; } @media (max-width: 680px) { .v2-mileage-table.semi-table-wrapper { width: 100%; min-width: 0; font-size: 10px; } .v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 40px; padding: 0 8px; font-size: 9px; } .v2-mileage-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 46px; padding: 0 8px; font-size: 10px; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-plate { width: 96px; min-width: 96px; max-width: 96px; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-date { width: 78px; min-width: 78px; } .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-total { width: 108px; min-width: 108px; } .v2-mileage-table .semi-table-row-cell.is-daily { font-size: 9px; } .v2-mileage-table .semi-table-row-cell.is-period { font-size: 10px; } .v2-mileage-loading { min-height: 260px; } } /* Semi UI monitor list: realtime desktop grid and shared async feedback. */ .v2-monitor-table.semi-table-wrapper { width: 100%; min-width: 1080px; color: #46566c; } .v2-monitor-table .semi-table-container { border: 0; } .v2-monitor-table-scroll .v2-monitor-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { position: sticky; z-index: 3; top: 0; height: 42px; border-bottom: 1px solid #dce4ee; background: #f7f9fc; padding: 0 14px; color: #607086; font-size: 10px; font-weight: 700; } .v2-monitor-table .semi-table-tbody > .semi-table-row { transition: background-color .14s ease; } .v2-monitor-table .semi-table-tbody > .semi-table-row:hover { background: #f8fbff; } .v2-monitor-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 62px; border-bottom: 1px solid #edf1f6; padding: 7px 14px; vertical-align: middle; } .v2-monitor-table-loading { position: sticky; z-index: 4; bottom: 0; min-height: 36px; height: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(3px); } .v2-monitor-table-loading .semi-spin-wrapper { display: flex; align-items: center; gap: 7px; } .v2-monitor-table-loading .semi-spin-tip { margin-top: 0; color: #607086; font-size: 10px; font-weight: 600; } .v2-monitor-table-empty.semi-empty { position: sticky; left: 0; min-height: 260px; justify-content: center; padding: 24px; } .v2-monitor-table-empty .semi-empty-image { width: 70px; height: 56px; } .v2-monitor-table-empty .semi-empty-title { color: #4b5f76; font-size: 13px; font-weight: 700; } .v2-monitor-table-empty .semi-empty-description { color: #8794a5; font-size: 10px; } .v2-monitor-address-loading .semi-spin { flex: 0 0 auto; } /* Semi UI access fleet: one interaction model for dense source-health inspection. */ .v2-access-semi-table.semi-table-wrapper { width: 100%; min-width: 1030px; color: #48576c; font-size: 12px; } .v2-access-semi-table .semi-table-container { border: 0; } .v2-access-table-scroll-v3 .v2-access-semi-table .semi-table-body { overflow: visible; } .v2-access-table-scroll-v3 .v2-access-semi-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { position: sticky; z-index: 3; top: 0; height: 42px; border-bottom: 1px solid #dfe5ed; background: #f7f9fc; padding: 8px 11px; color: #647287; font-size: 11px; font-weight: 700; } .v2-access-semi-table .semi-table-tbody > .semi-table-row { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; } .v2-access-semi-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell, .v2-access-semi-table .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell { background: #f2f7ff; } .v2-access-semi-table .semi-table-tbody > .semi-table-row:focus-visible { outline: 0; box-shadow: inset 3px 0 0 #2f7de1, inset 0 0 0 2px rgba(47,125,225,.22); } .v2-access-semi-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 67px; border-bottom: 1px solid #edf1f5; padding: 8px 11px; vertical-align: middle; } .v2-access-primary-cell, .v2-access-source-cell { display: flex; min-width: 0; flex-direction: column; gap: 5px; } .v2-access-primary-cell > strong, .v2-access-source-cell > b { overflow: hidden; color: #314158; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .v2-access-primary-cell > span, .v2-access-source-cell > span { overflow: hidden; color: #8793a5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } /* Semi UI alert events: dense evidence grid with a single responsive render path. */ .v2-alert-event-table.semi-table-wrapper { width: 100%; min-width: 1410px; color: #4e5b6f; font-size: 11px; } .v2-alert-event-table .semi-table-container { border: 0; } .v2-alert-table-scroll .v2-alert-event-table .semi-table-body { overflow: visible; } .v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { position: sticky; z-index: 4; top: 0; height: 40px; max-width: none; border-right: 1px solid #edf1f6; border-bottom: 1px solid #dfe6ef; background: #f7f9fc; padding: 0 9px; color: #607086; font-size: 10px; font-weight: 700; } .v2-alert-event-table .semi-table-tbody > .semi-table-row { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; } .v2-alert-event-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell, .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell { background: #f2f7ff; } .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell:first-child { box-shadow: inset 3px 0 #2f7de1; } .v2-alert-event-table .semi-table-tbody > .semi-table-row:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(47,125,225,.24); } .v2-alert-event-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 46px; max-width: none; border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; padding: 6px 9px; font-variant-numeric: tabular-nums; vertical-align: middle; } .v2-alert-event-table .semi-radio { display: inline-flex; } .v2-alert-event-vehicle { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-alert-event-vehicle strong, .v2-alert-event-vehicle small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-alert-event-vehicle strong { color: #34445a; font-size: 11px; } .v2-alert-event-vehicle small { color: #8b97a8; font-size: 9px; } .v2-alert-event-rule, .v2-alert-event-location { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Semi UI history data: dynamic protocol columns with one responsive render path. */ .v2-history-data-table.semi-table-wrapper { width: 100%; color: #4e5b6f; font-size: 11px; } .v2-history-data-table .semi-table-container { border: 0; } .v2-history-table-scroll .v2-history-data-table .semi-table-body { overflow: visible; } .v2-history-table-scroll .v2-history-data-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { position: sticky; z-index: 4; top: 0; height: 42px; max-width: none; border-right: 1px solid #edf1f6; border-bottom: 1px solid #dfe6ef; background: #f7f9fc; padding: 0 9px; color: #607086; font-size: 10px; font-weight: 700; } .v2-history-data-table .semi-table-tbody > .semi-table-row { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; } .v2-history-data-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell, .v2-history-data-table .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell { background: #f2f7ff; } .v2-history-data-table .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell:first-child { box-shadow: inset 3px 0 #2f7de1; } .v2-history-data-table .semi-table-tbody > .semi-table-row:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(47,125,225,.24); } .v2-history-data-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 46px; max-width: none; border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; padding: 6px 9px; font-variant-numeric: tabular-nums; vertical-align: middle; } .v2-history-table-card.is-comfortable .v2-history-data-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 58px; } .v2-history-data-table .semi-checkbox { display: inline-flex; } .v2-history-vin, .v2-history-data-table .v2-history-quality-reason > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-history-data-table .v2-history-quality-reason { color: #66758a; } .v2-history-data-table .semi-table-row-cell > .semi-button { height: 28px; border-radius: 6px; padding: 0 7px; color: var(--v2-blue); font-size: 10px; } /* Semi UI source diagnostics: one dense desktop table and task-focused mobile cards. */ .v2-source-table-wrap { margin: 0 14px 12px; overflow: hidden; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; } .v2-source-table.semi-table-wrapper { width: 100%; min-width: 0; border: 0; table-layout: initial; } .v2-source-table .semi-table-container { border: 0; } .v2-source-table .semi-table-body { overflow-x: auto; } .v2-source-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 42px; border-color: #e3e9f1; background: #f5f7fa; padding: 0 11px; color: #66788e; font-size: 10px; font-weight: 650; vertical-align: middle; } .v2-source-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: auto; min-height: 76px; border-color: #e8edf3; padding: 11px; color: #384c63; font-size: 11px; line-height: 1.5; vertical-align: top; } .v2-source-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { background: #f8fbff; } .v2-source-table .semi-table-tbody > .semi-table-row.is-recommended > .semi-table-row-cell { background: #f2faf7; } .v2-source-table .semi-table-tbody > .semi-table-row.is-recommended:hover > .semi-table-row-cell { background: #ebf7f2; } .v2-source-table .semi-table-tbody > .semi-table-row.is-recommended > .semi-table-row-cell:first-child { box-shadow: inset 3px 0 #22a878; } .v2-source-cell { display: grid; min-width: 0; gap: 5px; } .v2-source-cell > strong, .v2-source-cell > span > strong { overflow: hidden; color: #2c4159; font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; } .v2-source-cell > small { display: block; overflow: hidden; color: #7e8c9f; font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .v2-source-identity-cell > span, .v2-source-health-cell > span { display: flex; min-width: 0; align-items: center; gap: 6px; } .v2-source-identity-cell .semi-tag, .v2-source-cell > .semi-tag { width: max-content; min-height: 22px; border-radius: 999px; font-size: 9px; } .v2-source-health-cell i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.12); } .v2-source-health-cell i.is-online { background: #22a878; box-shadow: 0 0 0 3px rgba(34,168,120,.12); } .v2-source-reason small { overflow: visible; line-height: 1.55; text-overflow: clip; white-space: normal; } .v2-source-policy-cell { display: grid; min-width: 250px; grid-template-columns: minmax(86px,auto) 76px; gap: 7px; } .v2-source-policy-cell > .semi-checkbox { min-height: 32px; font-size: 10px; } .v2-source-policy-cell > .semi-input-wrapper { height: 32px; border-color: #d5deea; border-radius: 7px; } .v2-source-policy-cell > .semi-input-wrapper .semi-input { height: 30px; font-size: 10px; } .v2-source-policy-cell > .semi-button { width: 100%; height: 32px; grid-column: 1 / -1; border-radius: 7px; font-size: 10px; } .v2-source-policy-summary { display: grid; min-width: 0; gap: 7px; } .v2-source-policy-summary > span { display: flex; min-width: 0; align-items: center; gap: 7px; } .v2-source-policy-summary .semi-tag { min-height: 22px; border-radius: 999px; font-size: 9px; } .v2-source-policy-summary b { color: #53667d; font-size: 10px; font-weight: 600; } .v2-source-policy-summary small { overflow: hidden; color: #8794a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-policy-summary > .semi-button { width: max-content; height: 28px; border-radius: 6px; padding: 0 9px; font-size: 9px; } .v2-source-policy-sidesheet .semi-sidesheet-inner { width: min(440px,100vw) !important; } .v2-source-policy-sidesheet .semi-sidesheet-header { min-height: 66px; border-bottom: 1px solid #e1e8f0; background: linear-gradient(180deg,#fff,#f8fafd); padding: 12px 16px; } .v2-source-policy-sheet-title { display: grid; gap: 4px; } .v2-source-policy-sheet-title strong { color: #263d55; font-size: 16px; } .v2-source-policy-sheet-title span { color: #7c8b9e; font-size: 10px; font-weight: 400; } .v2-source-policy-sidesheet .semi-sidesheet-body { background: #f5f7fa; padding: 14px; } .v2-source-policy-sheet-content { display: grid; gap: 12px; } .v2-source-policy-sheet-summary { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 12px; border: 1px solid #dfe7f0; border-radius: 10px; background: #fff; padding: 12px; } .v2-source-policy-sheet-content > .v2-source-policy-cell { min-width: 0; grid-template-columns: minmax(96px,auto) 84px; gap: 9px; border: 1px solid #dfe7f0; border-radius: 10px; background: #fff; padding: 14px; } .v2-source-policy-sheet-content > .v2-source-policy-cell > .semi-checkbox, .v2-source-policy-sheet-content > .v2-source-policy-cell > .semi-input-wrapper, .v2-source-policy-sheet-content > .v2-source-policy-cell > .semi-button { min-height: 38px; } .v2-source-policy-sheet-content > .v2-source-policy-cell > .semi-input-wrapper .semi-input { height: 36px; font-size: 12px; } .v2-source-policy-sheet-content > .v2-source-policy-cell > .semi-button { height: 38px; font-size: 12px; } .v2-source-mobile-list { display: none; } @media (max-width: 680px) { .v2-source-table-wrap { display: none; } .v2-source-mobile-list { display: grid; gap: 10px; padding: 0 10px 10px; } .v2-source-mobile-card.semi-card { overflow: hidden; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,80,.05); } .v2-source-mobile-card.semi-card.is-recommended { border-color: #adddcc; box-shadow: inset 3px 0 #22a878, 0 7px 20px rgba(31,53,80,.06); } .v2-source-mobile-card > .semi-card-body > header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; border-bottom: 1px solid #e6ecf3; background: linear-gradient(180deg,#fff,#fafcfe); padding: 12px 13px; } .v2-source-mobile-card > .semi-card-body > header .v2-source-health-cell { min-width: 66px; justify-items: end; } .v2-source-mobile-card > .semi-card-body > header .v2-source-health-cell small { max-width: 120px; text-align: right; white-space: normal; } .v2-source-mobile-descriptions.semi-descriptions { width: 100%; padding: 4px 13px; } .v2-source-mobile-descriptions table { width: 100%; table-layout: fixed; } .v2-source-mobile-descriptions .semi-descriptions-item { min-height: 54px; border-bottom: 1px solid #edf1f5; padding: 9px 0; } .v2-source-mobile-descriptions .semi-descriptions-item-th { width: 104px; padding-right: 10px; } .v2-source-mobile-descriptions .semi-descriptions-key { color: #7c8b9e; font-size: 10px; font-weight: 500; } .v2-source-mobile-descriptions .semi-descriptions-value { min-width: 0; color: #33485f; font-size: 11px; } .v2-source-mobile-descriptions .v2-source-cell > strong, .v2-source-mobile-descriptions .v2-source-cell > span > strong { font-size: 11px; white-space: normal; } .v2-source-mobile-descriptions .v2-source-cell > small { font-size: 10px; white-space: normal; } .v2-source-mobile-card > .semi-card-body > section { padding: 11px 13px 13px; } .v2-source-mobile-card > .semi-card-body > section > strong { display: block; margin-bottom: 9px; color: #30465e; font-size: 12px; } .v2-source-mobile-card .v2-source-policy-cell { min-width: 0; grid-template-columns: minmax(0,1fr) 84px; gap: 8px; } .v2-source-mobile-card .v2-source-policy-cell > .semi-checkbox, .v2-source-mobile-card .v2-source-policy-cell > .semi-input-wrapper, .v2-source-mobile-card .v2-source-policy-cell > .semi-button { min-height: 40px; } .v2-source-mobile-card .v2-source-policy-cell > .semi-input-wrapper .semi-input { height: 38px; font-size: 12px; } .v2-source-mobile-card .v2-source-policy-cell > .semi-button { height: 40px; font-size: 12px; } .v2-source-policy-sidesheet .semi-sidesheet-body { padding: 10px; } .v2-source-policy-sheet-summary { grid-template-columns: 1fr; } } /* Semi UI account workspace: searchable directory, task tabs and a compact mobile switcher. */ .v2-user-admin-grid { align-items: start; grid-template-columns: 310px minmax(0,1fr); gap: 14px; } .v2-user-list.semi-card { position: sticky; top: 14px; max-height: calc(100vh - 122px); border-color: #dce5ef; background: #fff; } .v2-user-list > .semi-card-body { display: flex; min-height: 0; flex-direction: column; padding: 14px; } .v2-user-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 13px; } .v2-user-directory-heading > span { display: flex; align-items: baseline; gap: 7px; } .v2-user-directory-heading strong { color: #263b54; font-size: 24px; letter-spacing: -.04em; } .v2-user-directory-heading small { color: #7b899b; font-size: 11px; font-weight: 650; } .v2-user-directory-heading .semi-tag { min-height: 23px; border-radius: 999px; font-size: 9px; font-weight: 650; } .v2-user-list-search.semi-input-wrapper { min-height: 38px; flex: 0 0 auto; margin-bottom: 11px; border: 1px solid #d9e3ee; border-radius: 9px; background: #f8fafc; } .v2-user-list-search.semi-input-wrapper-focus { border-color: #8fb7f4; background: #fff; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-user-list-search .semi-input { height: 36px; font-size: 12px; } .v2-customer-list.semi-list { min-height: 0; overflow: auto; padding-right: 2px; } .v2-customer-list .semi-list-items { display: grid; gap: 7px; } .v2-customer-list .v2-user-list-row.semi-list-item { overflow: hidden; min-height: 62px; border: 1px solid transparent; border-radius: 10px; background: #f7f9fc; padding: 0; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-customer-list .v2-user-list-row.semi-list-item:hover { border-color: #d2deeb; background: #fff; box-shadow: 0 6px 16px rgba(38,62,91,.06); transform: translateY(-1px); } .v2-customer-list .v2-user-list-row.is-active.semi-list-item { border-color: #a8c8f6; background: linear-gradient(110deg,#edf5ff 0%,#f8fbff 100%); box-shadow: inset 3px 0 var(--v2-blue), 0 6px 18px rgba(18,104,243,.07); } .v2-customer-list .v2-user-list-item.semi-button { display: flex; width: 100%; height: auto; min-height: 62px; justify-content: stretch; border-radius: 10px; background: transparent; padding: 9px 10px; color: #273750; text-align: left; } .v2-customer-list .v2-user-list-item.semi-button:hover { background: transparent; } .v2-customer-list .v2-user-list-row.is-active .v2-user-list-trailing > svg { color: var(--v2-blue); } .v2-user-filter-empty.semi-empty { min-height: 170px; justify-content: center; padding: 18px 8px; } .v2-user-filter-empty .semi-empty-image { display: none; } .v2-user-filter-empty .semi-empty-title { color: #4e6179; font-size: 12px; font-weight: 700; } .v2-user-filter-empty .semi-empty-description { color: #8794a5; font-size: 10px; } .v2-user-mobile-picker { display: none; } .v2-user-editor.semi-card { border-color: #dce5ef; background: #fff; } .v2-user-editor form { min-height: 690px; gap: 14px; padding: 20px; } .v2-user-editor-title { min-height: 76px; align-items: center; padding: 15px 18px; } .v2-user-editor-title h3 { font-size: 21px; } .v2-user-editor-title p { font-size: 11px; } .v2-user-editor-tabs.semi-tabs { min-width: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,80,.035); } .v2-user-editor-tabs > .semi-tabs-bar { min-height: 51px; border-bottom: 1px solid #e5ebf2; background: linear-gradient(180deg,#fff,#fafcfe); padding: 0 16px; } .v2-user-editor-tabs > .semi-tabs-bar .semi-tabs-tab { min-height: 50px; margin: 0 24px 0 0; padding: 0 2px; color: #6c7b8e; font-size: 12px; font-weight: 650; } .v2-user-editor-tabs > .semi-tabs-bar .semi-tabs-tab-active { color: var(--v2-blue); } .v2-user-tab-label { display: inline-flex; align-items: center; gap: 7px; } .v2-user-tab-label .semi-tag { min-width: 22px; min-height: 20px; justify-content: center; border-radius: 999px; padding: 0 6px; font-size: 9px; } .v2-user-editor-tabs > .semi-tabs-content { background: #f5f7fa; padding: 14px; } .v2-user-editor-tabs .v2-user-editor-section.semi-card { margin: 0; box-shadow: none; } .v2-user-editor form > footer { position: sticky; z-index: 2; bottom: 0; align-items: center; min-height: 58px; justify-content: flex-end; border-top: 1px solid #e3e9f1; background: rgba(255,255,255,.94); margin: 0 -20px -20px; padding: 9px 20px; backdrop-filter: blur(10px); } .v2-user-editor form > footer .semi-button { min-width: 128px; } @media (max-width: 680px) { .v2-user-admin-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; overflow: visible; } .v2-user-list.semi-card { position: static; max-height: none; border-radius: 10px; } .v2-user-list > .semi-card-body { display: block; padding: 10px; } .v2-user-directory-heading { padding: 0 1px 9px; } .v2-user-directory-heading strong { font-size: 21px; } .v2-user-directory-heading small { font-size: 10px; } .v2-user-list-search, .v2-customer-list { display: none; } .v2-user-mobile-picker { display: grid; gap: 7px; } .v2-user-mobile-picker > label { color: #68788d; font-size: 10px; font-weight: 650; } .v2-user-mobile-picker > .semi-select { width: 100%; min-height: 42px; border: 1px solid #d7e1ec; border-radius: 9px; background: #f8fafc; } .v2-user-mobile-picker > .semi-select .semi-select-selection { min-height: 40px; font-size: 12px; } .v2-user-mobile-picker > small { color: #8794a5; font-size: 9px; line-height: 1.45; } .v2-user-select-option { display: grid; gap: 2px; padding: 2px 0; } .v2-user-select-option b { color: #354a62; font-size: 12px; } .v2-user-select-option small { color: #8390a2; font-size: 9px; } .v2-user-editor form { min-height: 0; gap: 8px; padding: 9px; } .v2-user-editor-title { min-height: 66px; border-radius: 9px; padding: 12px; } .v2-user-editor-title h3 { font-size: 18px; } .v2-user-editor-title p { overflow: hidden; max-width: 230px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-user-editor-tabs.semi-tabs { border-radius: 9px; } .v2-user-editor-tabs > .semi-tabs-bar { min-height: 47px; overflow-x: auto; padding: 0 9px; } .v2-user-editor-tabs > .semi-tabs-bar .semi-tabs-tab { min-height: 46px; flex: 0 0 auto; margin-right: 17px; font-size: 11px; } .v2-user-editor-tabs > .semi-tabs-content { padding: 8px; } .v2-user-editor-section > .semi-card-header { min-height: 44px; } .v2-user-editor-section > .semi-card-body { padding: 11px; } .v2-user-editor form > footer { bottom: 66px; min-height: 60px; margin: 0 -9px -9px; padding: 8px 9px; } .v2-user-editor form > footer .semi-button { width: 100%; min-width: 0; height: 44px; justify-content: center; } } /* Semi UI vehicle evidence: full-width telemetry table and responsive evidence cards. */ .v2-record-grid { grid-template-rows: minmax(300px,1.05fr) auto auto; } .v2-telemetry-card.semi-card { grid-column: 1 / -1; grid-row: 2; content-visibility: visible; } .v2-archive-card.semi-card { grid-column: 1 / -1; grid-row: 3; } .v2-event-list.semi-list { padding: 4px 14px 10px; } .v2-event-list .semi-list-items { display: grid; } .v2-event-list .v2-event-row.semi-list-item { position: relative; display: grid; min-height: 46px; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; padding: 5px 0; } .v2-event-list .v2-event-row.semi-list-item:not(:last-child)::after { position: absolute; top: 34px; bottom: -12px; left: 11px; width: 1px; background: #dfe7f0; content: ''; } .v2-event-list .v2-event-row strong { color: #33485f; font-size: 10px; } .v2-event-list .v2-event-row p { color: #7d8b9e; font-size: 9px; } .v2-event-list .v2-event-row time { color: #8795a7; font-size: 9px; } .v2-event-empty.semi-empty { min-height: 225px; justify-content: center; padding: 22px; } .v2-event-empty .semi-empty-image { width: 72px; height: 58px; } .v2-event-empty .semi-empty-title { color: #43576f; font-size: 12px; font-weight: 700; } .v2-event-empty .semi-empty-description { max-width: 260px; color: #8492a4; font-size: 10px; line-height: 1.55; } .v2-telemetry-table-wrap { overflow: hidden; margin: 12px 14px 4px; border: 1px solid #dce5ef; border-radius: 9px; background: #fff; } .v2-telemetry-table.semi-table-wrapper { width: 100%; } .v2-telemetry-table .semi-table-container { border: 0; } .v2-telemetry-table .semi-table-thead > .semi-table-row > .semi-table-row-head { min-height: 40px; border-bottom: 1px solid #dce5ef; background: #f5f8fb; padding: 10px 12px; color: #65758a; font-size: 10px; font-weight: 700; } .v2-telemetry-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { min-height: 58px; border-bottom: 1px solid #e8edf3; padding: 10px 12px; vertical-align: middle; } .v2-telemetry-table .semi-table-tbody > .semi-table-row:last-child > .semi-table-row-cell { border-bottom: 0; } .v2-telemetry-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { background: #f7faff; } .v2-telemetry-field, .v2-telemetry-quality, .v2-telemetry-time, .v2-telemetry-source { display: grid; min-width: 0; gap: 4px; } .v2-telemetry-field strong { overflow: hidden; color: #30455d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-field small { overflow: hidden; color: #8a98aa; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-value { display: flex; min-width: 0; align-items: baseline; gap: 5px; } .v2-telemetry-value strong { overflow: hidden; color: #263c55; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-telemetry-value span { color: #7d8b9e; font-size: 9px; } .v2-telemetry-value.is-complex { display: block; } .v2-telemetry-value-trigger.semi-button { width: 100%; height: auto; min-height: 36px; justify-content: flex-start; border-radius: 7px; padding: 4px 6px; color: #315f9f; text-align: left; } .v2-telemetry-value-trigger .semi-button-content { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; } .v2-telemetry-value-trigger .semi-button-content > span { display: grid; min-width: 0; gap: 3px; } .v2-telemetry-value-trigger .semi-button-content strong, .v2-telemetry-value-trigger .semi-button-content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-value-trigger .semi-button-content strong { color: #245f9f; font-size: 11px; } .v2-telemetry-value-trigger .semi-button-content small { color: #8492a4; font-size: 8px; font-weight: 500; } .v2-telemetry-value-trigger .semi-icon { flex: 0 0 auto; color: #7d9ac2; font-size: 12px; } .v2-telemetry-value-trigger:hover { background: #edf5ff; } .v2-telemetry-quality { justify-items: start; } .v2-telemetry-quality .semi-tag { min-height: 22px; border-radius: 999px; font-size: 9px; font-weight: 650; } .v2-telemetry-quality small, .v2-telemetry-source small { overflow: hidden; color: #7f8d9f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-time { gap: 3px; } .v2-telemetry-time > span { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 6px; color: #4b6078; font-size: 9px; font-variant-numeric: tabular-nums; } .v2-telemetry-time > span small { color: #93a0b0; font-size: 8px; } .v2-telemetry-source .semi-tag { width: max-content; min-height: 22px; border-radius: 7px; font-size: 9px; } .v2-telemetry-state { display: grid; min-height: 170px; place-content: center; justify-items: center; gap: 6px; color: #8190a3; } .v2-telemetry-state strong { color: #42566e; font-size: 13px; } .v2-telemetry-state span { font-size: 10px; } .v2-telemetry-state.is-error strong, .v2-telemetry-state.is-error span { color: var(--v2-red); } .v2-telemetry-empty.semi-empty { min-height: 170px; justify-content: center; padding: 22px; } .v2-telemetry-empty .semi-empty-image { width: 72px; height: 58px; } .v2-telemetry-empty .semi-empty-title { color: #43576f; font-size: 12px; font-weight: 700; } .v2-telemetry-empty .semi-empty-description { color: #8492a4; font-size: 10px; } .v2-telemetry-mobile-list { display: none; } .v2-telemetry-card > .semi-card-body > footer { min-height: 40px; margin-top: 10px; } .v2-telemetry-value-sidesheet .semi-sidesheet-inner { max-width: 100vw; } .v2-telemetry-value-sidesheet .semi-sidesheet-header { border-bottom: 1px solid #e3e9f1; padding: 18px 20px 15px; } .v2-telemetry-value-title { display: grid; min-width: 0; gap: 4px; } .v2-telemetry-value-title strong { overflow: hidden; color: #243a53; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-value-title span { overflow: hidden; color: #8391a3; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-value-sidesheet .semi-sidesheet-body { background: #f6f8fb; padding: 16px; } .v2-telemetry-value-detail { display: grid; gap: 12px; } .v2-telemetry-value-meta.semi-descriptions { border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; padding: 12px 14px; } .v2-telemetry-value-meta .semi-descriptions-item { min-width: 130px; padding-block: 5px; } .v2-telemetry-value-meta .semi-descriptions-key { color: #8a97a8; font-size: 9px; } .v2-telemetry-value-meta .semi-descriptions-value { color: #3d5067; font-size: 10px; font-weight: 650; } .v2-telemetry-value-detail > section { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; } .v2-telemetry-value-detail > section > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4e9f0; padding: 9px 12px 9px 15px; } .v2-telemetry-value-detail > section > header > div { display: grid; min-width: 0; gap: 3px; } .v2-telemetry-value-detail > section > header strong { color: #30445c; font-size: 12px; } .v2-telemetry-value-detail > section > header small { color: #8a97a8; font-size: 9px; } .v2-telemetry-value-detail > section > header .semi-button { flex: 0 0 auto; } .v2-telemetry-value-detail pre { max-height: min(54vh,560px); margin: 0; overflow: auto; background: #f8fafc; padding: 15px; color: #31465e; font: 10px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; } .v2-telemetry-value-detail > footer { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid #dfe6ef; border-radius: 9px; background: #fff; padding: 10px 12px; } .v2-telemetry-value-detail > footer span { color: #8a97a8; font-size: 9px; } .v2-telemetry-value-detail > footer strong { overflow: hidden; color: #52667d; font: 9px ui-monospace,SFMono-Regular,Menlo,monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .v2-telemetry-value-footer { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; } .v2-telemetry-value-footer span { color: #7e8d9f; font-size: 9px; } @media (max-width: 680px) { .v2-record-grid { grid-template-rows: none; } .v2-telemetry-card.semi-card, .v2-archive-card.semi-card { grid-column: auto; grid-row: auto; } .v2-event-list.semi-list { padding: 4px 12px 9px; } .v2-event-list .v2-event-row.semi-list-item { min-height: 50px; grid-template-columns: 25px minmax(0,1fr); padding: 6px 0; } .v2-event-list .v2-event-row time { grid-column: 2; margin-top: -5px; text-align: left; } .v2-event-list .v2-event-row.semi-list-item:not(:last-child)::after { top: 36px; bottom: -14px; } .v2-event-empty.semi-empty { min-height: 150px; } .v2-telemetry-table-wrap { display: none; } .v2-telemetry-mobile-list.semi-list { display: block; padding: 9px; } .v2-telemetry-mobile-list .semi-list-items { display: grid; gap: 8px; } .v2-telemetry-mobile-list .v2-telemetry-mobile-item.semi-list-item { display: grid; gap: 9px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; padding: 11px 12px; box-shadow: 0 4px 14px rgba(31,53,80,.04); } .v2-telemetry-mobile-item > header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; } .v2-telemetry-mobile-item > header .v2-telemetry-value { justify-content: end; } .v2-telemetry-mobile-item > header .v2-telemetry-value strong { font-size: 13px; } .v2-telemetry-mobile-item > header .v2-telemetry-value.is-complex { width: min(142px,42vw); } .v2-telemetry-mobile-item > header .v2-telemetry-value-trigger.semi-button { padding: 2px 4px; } .v2-telemetry-mobile-item > div { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: 10px; border-top: 1px solid #edf1f5; padding-top: 9px; } .v2-telemetry-mobile-item > .v2-telemetry-source { display: flex; align-items: center; gap: 8px; } .v2-telemetry-mobile-item > .v2-telemetry-source small { min-width: 0; } .v2-telemetry-card > .semi-card-body > footer { flex-wrap: wrap; gap: 5px; margin: 3px 9px 9px; } .v2-telemetry-card > .semi-card-body > footer small { width: 100%; margin: 3px 0 0; } .v2-telemetry-value-sidesheet .semi-sidesheet-inner { width: 100vw !important; } .v2-telemetry-value-sidesheet .semi-sidesheet-header { padding: 15px 16px 13px; } .v2-telemetry-value-sidesheet .semi-sidesheet-body { padding: 12px; } .v2-telemetry-value-meta .semi-descriptions-item { min-width: 108px; } .v2-telemetry-value-detail > section > header { align-items: flex-start; flex-direction: column; } .v2-telemetry-value-detail > section > header .semi-button { width: 100%; justify-content: center; } .v2-telemetry-value-detail pre { max-height: 46vh; font-size: 9px; } .v2-telemetry-value-footer { align-items: stretch; flex-direction: column; } .v2-telemetry-value-footer .semi-button { width: 100%; justify-content: center; } } /* Semi UI track evidence: one list language for stops, events and source provenance. */ .v2-track-evidence-list.semi-list { min-height: 100%; background: #f7f9fc; padding: 7px; } .v2-track-evidence-list .semi-list-items { display: grid; gap: 5px; } .v2-track-evidence-list .v2-track-evidence-item.semi-list-item { display: block; overflow: hidden; border: 1px solid transparent; border-radius: 9px; background: #fff; padding: 0; box-shadow: 0 2px 8px rgba(32,54,82,.035); } .v2-track-evidence-list .v2-track-list-action.semi-button { display: grid; width: 100%; min-height: 54px; height: auto; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 7px 10px; color: inherit; text-align: left; } .v2-track-evidence-list .v2-track-list-action .semi-button-content { display: contents; } .v2-track-evidence-list .v2-track-list-action:hover { background: #f6f9fd; } .v2-track-evidence-list .v2-track-list-action:focus-visible { outline: 2px solid rgba(37,99,235,.35); outline-offset: -2px; } .v2-track-evidence-list .v2-track-list-action.is-active { background: linear-gradient(90deg, #e8f2ff 0%, #f3f8ff 100%); box-shadow: inset 3px 0 #2b74d8; } .v2-track-evidence-list .v2-track-list-action .semi-button-content > i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #eea63a; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; box-shadow: 0 3px 8px rgba(224,150,42,.18); } .v2-track-event-list .v2-track-list-action .semi-button-content > i { background: #397bda; box-shadow: 0 3px 8px rgba(57,123,218,.18); } .v2-track-event-list .v2-track-list-action .semi-button-content > i.is-start { background: #1ba871; } .v2-track-event-list .v2-track-list-action .semi-button-content > i.is-end { background: #e15858; } .v2-track-event-list .v2-track-list-action .semi-button-content > i.is-warning { background: #eea63a; } .v2-track-evidence-list .v2-track-list-action .semi-button-content > span { min-width: 0; } .v2-track-evidence-list button strong, .v2-track-evidence-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-evidence-list button strong { color: #34475e; font-size: 11px; font-weight: 700; } .v2-track-evidence-list button small { margin-top: 4px; color: #8795a8; font-size: 9px; } .v2-track-evidence-list .v2-track-list-action .semi-button-content > em { color: #65758a; font-size: 9px; font-style: normal; white-space: nowrap; } .v2-track-list-empty.semi-empty { min-height: 230px; justify-content: center; padding: 28px 18px; } .v2-track-list-empty .semi-empty-image { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #edf4fd; color: #4780cf; font-size: 20px; } .v2-track-list-empty .semi-empty-title { margin-top: 11px; color: #4a5e76; font-size: 12px; font-weight: 700; } .v2-track-list-empty .semi-empty-description { max-width: 220px; margin-top: 5px; color: #8a97a8; font-size: 9px; line-height: 1.55; } .v2-track-source-list.semi-list { background: transparent; } .v2-track-source-list .semi-list-items { display: grid; gap: 6px; } .v2-track-source-list .v2-track-source-item.semi-list-item { display: grid; min-height: 48px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 8px; border: 1px solid #e1e8f1; border-radius: 8px; background: linear-gradient(135deg, #f8fafc 0%, #f4f8fd 100%); padding: 8px 9px; } .v2-track-source-item .semi-tag { width: max-content; max-width: 100%; overflow: hidden; border-radius: 6px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-source-item > strong { color: #3e526a; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; } .v2-track-source-item > small { grid-column: 1 / -1; color: #8795a7; font-size: 8px; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .v2-track-evidence-list.semi-list { padding: 8px; } .v2-track-evidence-list .v2-track-list-action.semi-button { min-height: 58px; padding: 8px 10px; } .v2-track-evidence-list button strong { font-size: 12px; } .v2-track-evidence-list button small, .v2-track-evidence-list .v2-track-list-action .semi-button-content > em { font-size: 10px; } .v2-track-source-list .v2-track-source-item.semi-list-item { min-height: 54px; padding: 9px 10px; } .v2-track-source-item .semi-tag, .v2-track-source-item > small { font-size: 9px; } .v2-track-source-item > strong { font-size: 11px; } } /* Semi UI history workspace: compact query rail, resilient summary and clear permission state. */ .v2-history-filter-card > .semi-card-body { min-height: 0; } .v2-history-toolbar { min-height: 72px; grid-template-columns: minmax(190px,1fr) minmax(300px,1.45fr) minmax(104px,.55fr) minmax(112px,.6fr) auto; align-items: end; column-gap: 10px; row-gap: 12px; } .v2-history-toolbar-actions { display: flex; min-width: max-content; align-items: center; justify-content: flex-end; gap: 6px; } .v2-history-toolbar-actions > .semi-button { width: auto; min-width: 58px; height: 38px; border-radius: 8px; padding-inline: 14px; font-size: 12px; font-weight: 700; } .v2-history-toolbar-actions > .semi-button-primary.semi-button-solid { box-shadow: 0 7px 16px rgba(18,104,243,.15); } .v2-history-permission-tag.semi-tag { height: 30px; flex: 0 0 auto; border-radius: 7px; padding-inline: 10px; color: #6d7c90; font-size: 10px; font-weight: 700; cursor: help; } .v2-history-metric-scroll { scrollbar-width: none; scroll-padding-inline: 8px; scroll-snap-type: x proximity; } .v2-history-metric-scroll::-webkit-scrollbar { display: none; } .v2-history-metric-tag.semi-tag { scroll-snap-align: start; } .v2-history-summary strong.is-source { font-size: 17px; } @media (max-width: 1100px) { .v2-history-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-history-vehicles, .v2-history-range { grid-column: 1 / -1; } .v2-history-toolbar-actions { grid-column: 1 / -1; } } @media (max-height: 800px) and (min-width: 901px) { .v2-history-page { height: auto; min-height: 100%; overflow: auto; } .v2-history-workspace { min-height: 540px; flex: 0 0 540px; } } @media (max-width: 680px) { .v2-history-toolbar { min-height: 0; grid-template-columns: 1fr; } .v2-history-vehicles, .v2-history-range, .v2-history-toolbar-actions { grid-column: auto; } .v2-history-toolbar-actions { min-width: 0; justify-content: stretch; } .v2-history-toolbar-actions > .semi-button { width: auto; min-width: 0; height: 42px; flex: 1; } .v2-history-permission-tag.semi-tag { height: 32px; padding-inline: 9px; } .v2-history-summary > .semi-card-body > div { padding-inline: 8px; } .v2-history-summary strong { font-size: 18px; } .v2-history-summary strong.is-source { font-size: 15px; } } /* Monitor realtime list: operational mileage and protocol evidence stay visible. */ .v2-monitor-table.semi-table-wrapper { min-width: 1320px; } .v2-monitor-table-scroll table { min-width: 1320px; } .v2-monitor-live-value.is-today { color: #1268df; } .v2-monitor-protocol { display: flex; min-width: 0; align-items: center; gap: 6px; } .v2-monitor-protocol .semi-tag { max-width: 104px; overflow: hidden; border-radius: 999px; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-protocol > small { color: #77869a; font-size: 9px; white-space: nowrap; } /* Monitor detail: the newest report is the first, strongest evidence block. */ .v2-detail-body { min-width: 0; min-height: 100%; } .v2-detail-shell-header { position: sticky; z-index: 5; top: -14px; margin: -14px -14px 8px; border-bottom: 1px solid #e5ebf3; background: #fff; padding: 14px 14px 8px; } .v2-detail-shell-header .v2-detail-controls { position: absolute; top: 12px; right: 14px; } .v2-detail-shell-header .v2-detail-controls .semi-button { width: 32px; min-width: 32px; height: 32px; border-radius: 8px; } .v2-detail-shell-header .v2-detail-title { border-bottom: 0; padding: 1px 76px 10px 0; } .v2-detail-shell-header .v2-detail-title strong { color: #1d2b3f; font-size: 18px; letter-spacing: -.2px; } .v2-detail-shell-header .v2-detail-title small { margin-top: 5px; color: #718197; font-size: 10px; font-variant-numeric: tabular-nums; } .v2-detail-shell-header .v2-status-text.semi-tag { height: 22px; padding-inline: 8px; font-size: 10px; } .v2-detail-actions { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 0; } .v2-detail-actions a { height: 38px; min-width: 0; gap: 5px; border-color: #e1e8f1; border-radius: 8px; background: #fff; color: #55667c; font-size: 10px; } .v2-detail-actions a > svg { flex: 0 0 auto; font-size: 13px; } .v2-detail-actions a:first-child { border-color: #c6daf8; background: #eef5ff; color: #1268df; } .v2-detail-actions a:hover, .v2-detail-actions a:focus-visible { border-color: #a9c8f7; background: #f4f8ff; color: #1268df; outline: 0; } .v2-vehicle-detail .v2-detail-section { margin-top: 8px; overflow: hidden; border: 1px solid #e0e8f1; border-radius: 10px; background: #fff; padding: 0; } .v2-detail-section > .v2-workspace-panel-header { min-height: 48px; border-bottom: 1px solid #e8edf4; background: #fbfcfe; padding: 9px 10px; } .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-copy > h5 { font-size: 12px; } .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-copy > .semi-typography, .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-meta { font-size: 9px; } .v2-detail-section > .v2-workspace-panel-header .semi-tag { flex: 0 0 auto; max-width: 122px; overflow: hidden; border-radius: 999px; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-detail .v2-detail-report { margin-top: 8px; border-color: #d6e5f8; background: #fff; padding: 0; } .v2-detail-report > .v2-workspace-panel-header { border-bottom-color: #dce9f8; background: #f5f9ff; } .v2-report-summary { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.8fr) minmax(0,1fr); gap: 0; overflow: hidden; margin: 9px 10px 0; border: 1px solid #dce7f4; border-radius: 9px; background: #f8fafd; } .v2-report-summary > span { min-width: 0; padding: 8px 9px; } .v2-report-summary > span + span { border-left: 1px solid #e3eaf3; } .v2-report-summary small, .v2-report-summary strong, .v2-report-summary b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-report-summary small { color: #7186a1; font-size: 8px; } .v2-report-summary strong { margin-top: 4px; color: #153f73; font-size: 12px; font-variant-numeric: tabular-nums; } .v2-report-summary b { margin-top: 4px; color: #345679; font-size: 10px; } .v2-detail-report .v2-detail-list { margin: 5px 10px 8px; } .v2-detail-report .v2-detail-list > div { min-height: 24px; grid-template-columns: 44px minmax(0,1fr); align-items: center; padding-block: 3px; } .v2-detail-report .v2-detail-list dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-detail-report .v2-detail-source-link.semi-button { width: 100%; min-width: 0; justify-content: flex-start; overflow: hidden; } .v2-detail-report .v2-detail-source-link .semi-button-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-detail-section > .v2-metric-grid { margin: 10px; border-color: #e0e7f0; border-radius: 8px; } .v2-detail-section > .v2-metric-grid > div { position: relative; min-height: 68px; padding: 10px 11px 9px; } .v2-detail-section > .v2-metric-grid > div::after { position: absolute; right: 11px; bottom: 0; left: 11px; height: 2px; border-radius: 999px 999px 0 0; background: #dce5ef; content: ""; } .v2-detail-section > .v2-metric-grid > div:nth-child(1)::after { background: #78a9ef; } .v2-detail-section > .v2-metric-grid > div:nth-child(2)::after { background: #65bf94; } .v2-detail-section > .v2-metric-grid > div:nth-child(3)::after { background: #79a7ea; } .v2-detail-section > .v2-metric-grid > div:nth-child(4)::after { background: #2f7de9; } .v2-detail-section > .v2-metric-grid > div:nth-child(5)::after { background: #43b77d; } .v2-detail-section > .v2-metric-grid > .has-alerts::after { background: #eb6d70; } .v2-detail-section > .v2-metric-grid > div:nth-child(4) strong, .v2-detail-section > .v2-metric-grid > div:nth-child(4) .v2-metric-source-link { color: #1268df; } .v2-detail-section > .v2-metric-grid > .has-alerts strong { color: #c84349; } .v2-detail-section > .v2-gb-highlight-grid { margin: 0 10px 10px; } .v2-detail-section > .v2-detail-list { margin: 0; padding: 5px 10px 9px; } .v2-detail-section > .v2-detail-list > div { min-height: 30px; align-items: center; border-bottom: 1px solid #edf1f5; } .v2-detail-section > .v2-detail-list > div:last-child { border-bottom: 0; } @media (max-width: 760px) { .v2-detail-shell-header { top: -18px; margin: -14px -15px 8px; padding: 18px 15px 9px; } .v2-detail-shell-header .v2-detail-controls { top: 17px; right: 15px; } .v2-detail-actions { overflow-x: auto; grid-template-columns: repeat(4,minmax(92px,1fr)); overscroll-behavior-x: contain; scrollbar-width: none; } .v2-detail-actions::-webkit-scrollbar { display: none; } .v2-detail-actions a { height: 42px; font-size: 11px; } .v2-detail-section > .v2-workspace-panel-header { min-height: 52px; padding: 9px 11px; } .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-copy > h5 { font-size: 13px; } .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-copy > .semi-typography, .v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-meta { font-size: 10px; } .v2-report-summary { grid-template-columns: minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1fr); } .v2-report-summary strong { font-size: 13px; } .v2-detail-list > div { font-size: 10px; } .v2-metric-grid small { font-size: 9px; } .v2-metric-grid strong, .v2-metric-source-link.semi-button { font-size: 16px; } } /* Track replay always occupies the whole application workspace. */ .v2-content.is-track-workspace { min-height: 0; overflow: hidden; } .v2-content > .v2-track-page { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; align-self: stretch; } .v2-track-page > .v2-track-stage, .v2-track-stage > .v2-track-map, .v2-track-stage .v2-track-map-canvas { width: 100%; height: 100%; min-height: 0; } /* Mileage query: fixed workspace, compact controls and one independently scrolling matrix. */ .v2-content:has(> .v2-mileage-page) { min-height: 0; overflow: hidden; } .v2-mileage-page { width: 100%; height: 100%; min-height: 0; gap: 9px; overflow: hidden; padding: 12px 16px 14px; } .v2-mileage-page > .v2-monitor-return { flex: 0 0 auto; margin: 0; } .v2-mileage-query-panel.semi-card { flex: 0 0 auto; border-radius: 10px; } .v2-mileage-filter { min-height: 70px; grid-template-columns: minmax(220px,1.45fr) minmax(112px,.65fr) minmax(112px,.65fr) auto auto minmax(255px,1.2fr); align-items: end; gap: 9px; padding: 10px 12px; } .v2-mileage-filter > label { gap: 5px; font-size: 10px; } .v2-mileage-vehicle-field > small { display: none; } .v2-mileage-filter > label > .semi-input-wrapper, .v2-mileage-source-trigger.semi-button, .v2-mileage-filter > .semi-button-primary { height: 36px; min-height: 36px; } .v2-mileage-filter > .semi-button-primary { margin-top: 0; padding-inline: 17px; } .v2-mileage-source-strategy { align-self: end; margin-top: 0; } .v2-mileage-ranges { display: grid; min-width: 0; height: 36px; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; gap: 3px; border-radius: 8px; background: #f3f6fa; padding: 3px; } .v2-mileage-ranges > span { display: none; } .v2-mileage-ranges .semi-button { height: 30px; min-width: 0; padding-inline: 5px; font-size: 9px; } .v2-mileage-summary.semi-card { height: 104px; min-height: 104px; } .v2-mileage-summary > .semi-card-body { height: 104px; grid-template-columns: minmax(330px,1.2fr) minmax(0,2fr); } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary, .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { min-height: 104px; height: 104px; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { padding: 10px 22px 11px !important; } .v2-mileage-summary > .semi-card-body > .is-primary strong { font-size: clamp(25px,2vw,31px); } .v2-mileage-summary > .semi-card-body > .is-primary .v2-mileage-summary-value { min-height: auto; margin: 3px 0; padding: 0; line-height: 1.12; } .v2-mileage-summary-secondary.semi-card-group, .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card.semi-card { height: 104px; min-height: 104px; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card > .semi-card-body { min-height: 104px; padding: 10px 15px !important; } .v2-mileage-results.semi-card { min-height: 0; flex: 1 1 0; } .v2-mileage-results > .semi-card-body { height: 100%; min-height: 0; } .v2-mileage-results > .semi-card-body > header { min-height: 46px; padding-inline: 14px; } .v2-mileage-table-wrap { min-height: 0; flex: 1 1 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: #8296af #eef3f8; scrollbar-gutter: stable; scrollbar-width: auto; } .v2-mileage-table-wrap::-webkit-scrollbar { width: 14px; height: 14px; } .v2-mileage-table-wrap::-webkit-scrollbar-track { border-radius: 999px; background: #eef3f8; } .v2-mileage-table-wrap::-webkit-scrollbar-thumb { min-width: 48px; min-height: 48px; border: 3px solid transparent; border-radius: 999px; background: #8296af; background-clip: padding-box; } .v2-mileage-table-wrap::-webkit-scrollbar-thumb:hover { background-color: #617a99; } .v2-mileage-table-wrap::-webkit-scrollbar-corner { background: #eef3f8; } .v2-mileage-results > .semi-card-body > footer { min-height: 40px; height: 40px; padding: 4px 12px; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-button, .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-current { height: 28px; min-height: 28px; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-button { padding-inline: 8px; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-current { min-width: 52px; } .v2-mileage-evidence { min-height: 17px; flex: 0 0 auto; overflow: hidden; white-space: nowrap; } @media (max-width: 1100px) and (min-width: 681px) { .v2-mileage-filter { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(112px,.55fr)) auto auto; } .v2-mileage-ranges { grid-column: 1 / -1; } .v2-mileage-summary > .semi-card-body { grid-template-columns: minmax(285px,1fr) minmax(0,2fr); } } @media (max-width: 680px) { .v2-monitor-mobile-cards dl { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-monitor-mobile-cards dl > div { display: grid; min-height: 30px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px; } .v2-monitor-mobile-cards dl > div.is-address { min-height: 36px; grid-template-columns: 68px minmax(0,1fr); } .v2-monitor-mobile-cards dt { white-space: nowrap; } .v2-monitor-mobile-cards dd { min-width: 0; margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-mobile-cards dl > div.is-address dd { text-align: left; } .v2-monitor-mobile-cards dd code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-monitor-mobile-cards dd.is-today, .v2-monitor-mobile-protocol { color: #1268df; font-weight: 750; } .v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card { contain-intrinsic-size: auto 190px; } .v2-report-summary { grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1fr); } .v2-report-summary strong { font-size: 13px; } .v2-report-summary b { font-size: 11px; } .v2-mileage-page { height: 100%; min-height: 0; gap: 6px; overflow: hidden; padding: 7px; } .v2-mileage-query-panel { flex: 0 0 auto; padding: 0; } .v2-mileage-filter { min-height: 0; grid-template-columns: 1fr; padding: 10px; } .v2-mileage-summary.semi-card { height: 158px; min-height: 158px; } .v2-mileage-summary > .semi-card-body { height: 158px; grid-template-columns: 1fr; gap: 5px; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary, .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { height: 82px; min-height: 82px; } .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { padding: 8px 14px 9px !important; } .v2-mileage-summary > .semi-card-body > .is-primary .v2-mileage-summary-value { min-height: 32px; margin: 1px 0 2px; overflow: visible; padding: 0; line-height: 32px; } .v2-mileage-summary-secondary.semi-card-group, .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card.semi-card { height: 70px; min-height: 70px; } .v2-mileage-summary-secondary.semi-card-group > .v2-mileage-summary-card > .semi-card-body { min-height: 70px; padding: 8px 9px !important; } .v2-mileage-results.semi-card { min-height: 0; height: auto; flex: 1 1 0; overflow: hidden; } .v2-mileage-results > .semi-card-body { min-height: 0; } .v2-mileage-results > .semi-card-body > header { min-height: 76px; flex: 0 0 auto; padding: 8px 10px; } .v2-mileage-table-wrap { min-height: 0; flex: 1 1 0; overflow: auto; } .v2-mileage-results > .semi-card-body > footer:has(.v2-table-pagination-controls) { min-height: 44px; height: 44px; flex-direction: row; align-items: center; justify-content: flex-end; padding: 4px 8px; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-info { display: none; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-controls { width: 100%; justify-content: flex-end; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-button { height: 34px; flex: 0 1 96px; } .v2-mileage-results > .semi-card-body > footer .v2-table-pagination-current { height: 34px; flex: 0 0 58px; } .v2-mileage-evidence { display: none; } } /* Mobile visual QA: keep compact pagination controls and metric type fully visible. */ @media (max-width: 680px) { .v2-history-table-card > .semi-card-body > footer:has(.v2-table-pagination-controls) { min-height: 76px; height: auto; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 7px 10px; } .v2-history-table-card > .semi-card-body > footer .v2-table-pagination-info { width: 100%; flex: 0 0 auto; } .v2-history-table-card > .semi-card-body > footer .v2-table-pagination-controls { width: 100%; flex: 0 0 auto; } .v2-history-table-card > .semi-card-body > footer .v2-table-pagination-button { min-width: 0; flex: 1 1 0; padding-inline: 7px; } .v2-history-table-card > .semi-card-body > footer .v2-table-pagination-current { flex: 0 0 58px; } } /* Semi UI vehicle workspace refinement: one calm lookup surface and a responsive evidence-first record. */ .v2-vehicle-search-page { position: relative; background: radial-gradient(circle at 50% 38%,rgba(255,255,255,.94) 0,rgba(255,255,255,0) 38%), linear-gradient(180deg,#f6f9fd 0%,#eef3f8 100%); } .v2-vehicle-search-card.semi-card { width: min(700px,100%); border-radius: 18px; box-shadow: 0 28px 74px rgba(25,45,74,.105); } .v2-vehicle-search-card > .semi-card-body { padding: 44px 48px 40px; } .v2-vehicle-search-card .v2-search-hero-icon { width: 58px; height: 58px; margin-bottom: 20px; border: 1px solid #d9e8ff; border-radius: 16px; background: linear-gradient(145deg,#f4f8ff 0%,#e8f1ff 100%); box-shadow: 0 10px 26px rgba(18,104,243,.10); } .v2-vehicle-search-card > .semi-card-body > h2 { font-size: 28px; font-weight: 750; letter-spacing: -.045em; } .v2-vehicle-search-card > .semi-card-body > .semi-typography { max-width: 530px; margin: 11px auto 26px; color: #718096; font-size: 13px; line-height: 1.7; } .v2-vehicle-search-card form { height: 60px; border-color: #d7e1ed; background: #f7f9fc; } .v2-vehicle-search-card form > .semi-button { min-width: 116px; } .v2-vehicle-record-page { width: 100%; max-width: 1540px; margin-inline: auto; } .v2-vehicle-record-page .v2-identity-band.semi-card { min-height: 112px; border-color: #d7e2ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(31,53,80,.055); } .v2-vehicle-record-page .v2-identity-band > .semi-card-body { min-height: 110px; } .v2-vehicle-record-page .v2-identity-primary, .v2-vehicle-record-page .v2-identity-meta, .v2-vehicle-record-page .v2-identity-actions { padding: 17px 20px; } .v2-vehicle-record-page .v2-identity-primary { gap: 7px 13px; } .v2-vehicle-record-page .v2-plate { min-height: 42px; border-radius: 8px; padding-inline: 14px; font-size: 18px; letter-spacing: .01em; white-space: nowrap; } .v2-vehicle-record-page .v2-identity-primary small { font-size: 10px; } .v2-vehicle-record-page .v2-identity-primary b { min-width: 0; color: #3f4e63; font-size: 11px; letter-spacing: .015em; } .v2-vehicle-record-page .v2-identity-meta { gap: 20px; } .v2-vehicle-record-page .v2-identity-meta small { font-size: 10px; } .v2-vehicle-record-page .v2-identity-meta strong { margin-top: 7px; font-size: 12px; } .v2-vehicle-record-page .v2-identity-meta p { margin-top: 7px; } .v2-vehicle-record-page .v2-identity-meta p span { min-height: 24px; display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px; font-size: 10px; } .v2-vehicle-record-page .v2-identity-actions a { min-width: 0; height: 40px; justify-content: center; border-radius: 8px; background: #fff; padding-inline: 13px; font-size: 11px; transition: border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease; } .v2-vehicle-record-page .v2-identity-actions a:hover { background: #f5f8ff; transform: translateY(-1px); } .v2-vehicle-record-page .v2-record-card.semi-card, .v2-vehicle-record-page .v2-single-map-card.semi-card { border-color: #dbe4ef; border-radius: 12px; box-shadow: 0 7px 22px rgba(31,53,80,.048); } .v2-vehicle-record-page .v2-live-grid > div { padding: 14px 16px; } .v2-vehicle-record-page .v2-live-grid small { font-size: 10px; } .v2-vehicle-record-page .v2-live-grid strong, .v2-vehicle-record-page .v2-live-source-link { font-size: 20px; } .v2-vehicle-record-page .v2-live-grid strong.is-text { font-size: 15px; } .v2-vehicle-record-page .v2-live-grid em { font-size: 9px; } .v2-vehicle-record-page .v2-current-location { min-height: 56px; } .v2-vehicle-record-page .v2-current-location strong { font-size: 12px; } @media (max-width: 1400px) and (min-width: 901px) { .v2-vehicle-record-page .v2-identity-band > .semi-card-body { grid-template-columns: minmax(300px,.92fr) minmax(0,1.35fr); } .v2-vehicle-record-page .v2-identity-meta { border-right: 0; } .v2-vehicle-record-page .v2-identity-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border-top: 1px solid var(--v2-border); padding: 10px 14px; } .v2-vehicle-record-page .v2-identity-actions a { width: 100%; } } @media (max-width: 900px) { .v2-vehicle-record-page .v2-identity-band > .semi-card-body { grid-template-columns: 1fr; } .v2-vehicle-record-page .v2-identity-meta { border: 0; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); } .v2-vehicle-record-page .v2-identity-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; } .v2-vehicle-record-page .v2-identity-actions a { width: 100%; } } @media (max-width: 680px) { .v2-vehicle-search-page { padding: 10px; } .v2-vehicle-search-card.semi-card { border-radius: 14px; } .v2-vehicle-search-card > .semi-card-body { padding: 30px 18px 25px; } .v2-vehicle-search-card .v2-search-hero-icon { width: 52px; height: 52px; margin-bottom: 16px; border-radius: 14px; } .v2-vehicle-search-card > .semi-card-body > h2 { font-size: 23px; } .v2-vehicle-search-card > .semi-card-body > .semi-typography { max-width: 310px; margin: 10px auto 21px; font-size: 12px; line-height: 1.65; } .v2-vehicle-search-card form { height: auto; gap: 7px; } .v2-vehicle-search-card form > .semi-button { min-width: 0; } .v2-vehicle-record-page { padding: 8px; } .v2-vehicle-record-page .v2-identity-primary, .v2-vehicle-record-page .v2-identity-meta, .v2-vehicle-record-page .v2-identity-actions { padding: 13px; } .v2-vehicle-record-page .v2-identity-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .v2-vehicle-record-page .v2-identity-actions a { min-height: 42px; height: 42px; padding-inline: 8px; font-size: 11px; } .v2-vehicle-record-page .v2-live-grid strong, .v2-vehicle-record-page .v2-live-source-link { font-size: 18px; } } /* Semi UI convergence: one desktop/mobile grammar for standard data workspaces. */ :root { --v2-sidebar-width: 216px; --v2-page-gutter: clamp(16px, 1.55vw, 22px); --v2-page-gap: 12px; --v2-surface-border: #dfe6ef; --v2-surface-shadow: 0 7px 24px rgba(28, 44, 68, .055); } .v2-sidebar { width: var(--v2-sidebar-width); } .v2-main { margin-left: var(--v2-sidebar-width); } .v2-topbar-title > .semi-typography { font-size: 11px; } .v2-topbar-title h4 { font-size: 21px; } :is(.v2-history-page, .v2-alert-page, .v2-access-page-v3, .v2-user-admin, .v2-ops-page) { width: 100%; gap: var(--v2-page-gap); background: var(--v2-bg); padding: 12px var(--v2-page-gutter) var(--v2-page-gutter); } .v2-page-heading { width: 100%; min-height: 72px; align-items: center; padding: 5px 2px 3px; } .v2-page-heading-copy { gap: 7px; } .v2-page-heading-copy :is(h2, h3), .v2-page-heading-copy h2.semi-typography { margin: 0; color: #162033; font-size: 26px; font-weight: 720; letter-spacing: -.035em; line-height: 1.15; } .v2-page-heading-copy > .semi-typography { max-width: 820px; color: #66758a; font-size: 13px; line-height: 1.55; } .v2-page-heading-copy .semi-tag { min-height: 24px; border-radius: 999px; padding: 0 9px; font-size: 10px; } .v2-page-heading-aside > .semi-typography { font-size: 12px; } .v2-page-heading-aside > .semi-button { min-height: 38px; border-radius: 9px; padding: 0 14px; font-size: 12px; } :is( .v2-history-filter-card, .v2-history-metrics-card, .v2-history-summary, .v2-history-table-card, .v2-alert-filter-card, .v2-alert-kpis-card, .v2-alert-table-card, .v2-access-filter-card-v3, .v2-access-kpis-card-v3, .v2-access-table-v3, .v2-user-list, .v2-user-editor, .v2-reconcile-center, .v2-source-diagnostic, .v2-ops-kpi-card, .v2-ops-panel ).semi-card { border-color: var(--v2-surface-border); border-radius: 12px; background: #fff; box-shadow: var(--v2-surface-shadow); } :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) label, :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) legend { color: #5d6c80; font-size: 12px; font-weight: 600; } :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) :is(.semi-input-wrapper, .semi-select), :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) > .semi-button { min-height: 40px; border-radius: 8px; } :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) :is(.semi-input, .semi-select-selection) { font-size: 13px; } :is(.v2-history-table-scroll, .v2-alert-table-scroll, .v2-access-table-scroll-v3) table { font-size: 13px; } :is(.v2-history-table-scroll, .v2-alert-table-scroll, .v2-access-table-scroll-v3) th { height: 44px; color: #65758a; font-size: 12px; font-weight: 650; } :is(.v2-history-table-scroll, .v2-alert-table-scroll, .v2-access-table-scroll-v3) td { color: #293b52; font-size: 13px; } .v2-user-admin > .v2-page-heading { max-width: 1480px; margin-bottom: 4px; } .v2-user-admin-grid { min-height: 0; gap: 14px; } .v2-user-list.semi-card { top: 12px; } .v2-ops-page > .v2-page-heading { margin-bottom: 4px; } .v2-reconcile-center .v2-reconcile-layout { height: clamp(520px, 62vh, 680px); min-height: 0; } .v2-reconcile-main, .v2-reconcile-trend.semi-card { min-height: 0; } .v2-reconcile-table-wrap { min-height: 0; flex: 1 1 auto; overflow: auto; } .v2-reconcile-heading { min-height: 74px; padding: 13px 16px; } .v2-reconcile-heading strong { font-size: 19px; } .v2-reconcile-heading span { font-size: 12px; } .v2-ops-kpis small { font-size: 11px; } .v2-ops-kpis strong { font-size: 20px; } .v2-ops-kpis span { font-size: 10px; } .v2-ops-links article strong, .v2-ops-runtime dl div, .v2-ops-sources article strong { font-size: 12px; } .v2-ops-links article p, .v2-ops-sources article p, .v2-ops-sources article em { font-size: 10px; } @media (max-width: 900px) { :root { --v2-page-gutter: 12px; } .v2-main { margin-left: 0; } :is(.v2-history-page, .v2-alert-page, .v2-access-page-v3, .v2-user-admin, .v2-ops-page) { padding: 8px var(--v2-page-gutter) 18px; } .v2-page-heading { min-height: 62px; } .v2-page-heading-copy :is(h2, h3), .v2-page-heading-copy h2.semi-typography { font-size: 22px; } .v2-page-heading-copy > .semi-typography { font-size: 12px; } .v2-reconcile-center .v2-reconcile-layout { height: 600px; } } @media (max-width: 680px) { .v2-page-heading { min-height: 50px; padding: 2px 1px; } .v2-page-heading-copy :is(h2, h3), .v2-page-heading-copy h2.semi-typography { font-size: 19px; } .v2-page-heading-copy > .semi-typography { display: none; } .v2-page-heading-aside > .semi-typography { display: none; } .v2-reconcile-center .v2-reconcile-layout { height: auto; min-height: 520px; } :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) :is(.semi-input-wrapper, .semi-select), :is(.v2-history-toolbar, .v2-alert-filter, .v2-access-filter-v3) > .semi-button { min-height: 44px; } } /* Semi UI workspace migration: reconciliation headers share one visual anatomy. */ .v2-reconcile-heading.v2-workspace-panel-header { min-height: 74px; align-items: center; border-bottom-color: #e2e9f2; background: linear-gradient(105deg, #f8fbff 0%, #f4f8ff 58%, #eff6ff 100%); padding: 13px 16px; } .v2-reconcile-heading > .v2-workspace-panel-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; } .v2-reconcile-heading > .v2-workspace-panel-copy > h5.semi-typography { color: #17283b; font-size: 19px; } .v2-reconcile-heading > .v2-workspace-panel-copy > .semi-typography { max-width: min(760px, 58vw); color: #64758a; font-size: 12px; } .v2-reconcile-heading > .v2-workspace-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap: 10px; } .v2-reconcile-heading > .v2-workspace-panel-actions > .v2-workspace-panel-meta { border-radius: 999px; background: #e7f0ff; padding: 4px 9px; color: #3e679d; font-size: 10px; font-weight: 600; } .v2-reconcile-detail > .semi-card-body > .v2-reconcile-detail-heading { min-height: 66px; align-items: center; border-bottom: 1px solid #e3eaf2; background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%); padding: 10px 14px; } .v2-reconcile-detail > .semi-card-body > .v2-reconcile-detail-heading > .v2-workspace-panel-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 3px; } .v2-reconcile-detail-heading > .v2-workspace-panel-copy > h5.semi-typography { color: #21364d; font-size: 15px; } .v2-reconcile-detail-heading > .v2-workspace-panel-copy > .semi-typography { color: #738297; font-size: 10px; } .v2-reconcile-detail > .semi-card-body > .v2-reconcile-detail-heading > .v2-workspace-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap: 7px; } .v2-reconcile-detail-heading > .v2-workspace-panel-actions > .v2-workspace-panel-meta { border-radius: 0; background: transparent; padding: 0; } :is(.v2-reconcile-evidence, .v2-reconcile-review, .v2-reconcile-actions) > .semi-card-body > .v2-workspace-panel-header { min-height: 44px; margin: 0; border-bottom: 1px solid #e5ebf2; background: linear-gradient(180deg, #fff 0%, #fafbfd 100%); padding: 7px 11px; } :is(.v2-reconcile-evidence, .v2-reconcile-review, .v2-reconcile-actions) .v2-workspace-panel-copy > h5.semi-typography { color: #34495f; font-size: 12px; } :is(.v2-reconcile-evidence, .v2-reconcile-review, .v2-reconcile-actions) .v2-workspace-panel-copy > .semi-typography, :is(.v2-reconcile-evidence, .v2-reconcile-review, .v2-reconcile-actions) .v2-workspace-panel-meta { color: #8794a4; font-size: 10px; } .v2-reconcile-review > .semi-card-body > .v2-workspace-panel-header { margin-bottom: 9px; } .v2-reconcile-trend > .semi-card-body > .v2-workspace-panel-header { min-height: 46px; margin: -12px -12px 10px; border-bottom: 1px solid #e5ebf2; background: linear-gradient(180deg, #fff 0%, #fafbfd 100%); padding: 8px 12px; } .v2-reconcile-trend .v2-workspace-panel-copy > h5.semi-typography { color: #273b51; font-size: 13px; } .v2-reconcile-trend .v2-workspace-panel-meta { color: #8390a2; font-size: 10px; } @media (max-width: 680px) { .v2-reconcile-heading.v2-workspace-panel-header { min-height: 64px; align-items: flex-start; padding: 10px; } .v2-reconcile-heading > .v2-workspace-panel-copy > .semi-typography { display: none; } .v2-reconcile-heading > .v2-workspace-panel-actions { max-width: 58%; flex-wrap: wrap; justify-content: flex-end; } .v2-reconcile-heading > .v2-workspace-panel-actions > .v2-workspace-panel-meta { display: none; } .v2-reconcile-heading > .v2-workspace-panel-actions > .semi-button { width: auto; min-height: 38px; } .v2-reconcile-detail > .semi-card-body > .v2-reconcile-detail-heading { min-height: 64px; } .v2-reconcile-detail-heading > .v2-workspace-panel-copy > .semi-typography { display: block; } .v2-reconcile-trend > .semi-card-body > .v2-workspace-panel-header { align-items: center; } } /* Semi UI operations workspace: one focused task per view. */ .v2-ops-tabs { display: grid; width: min(620px, 100%); min-height: 52px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: flex-start; gap: 5px; border: 1px solid var(--v2-surface-border); border-radius: 12px; background: #fff; padding: 5px; box-shadow: var(--v2-surface-shadow); } .v2-ops-tabs > .semi-button { width: 100%; min-height: 40px; justify-content: center; border-radius: 8px; color: #607086; font-size: 12px; font-weight: 650; } .v2-ops-tabs > .semi-button:hover { background: #f3f6fa; color: #294c7a; } .v2-ops-tabs > .semi-button.is-active { background: var(--v2-blue); color: #fff; box-shadow: 0 5px 14px rgba(18, 104, 243, .2); } .v2-ops-workspace { display: grid; min-width: 0; gap: 12px; } .v2-ops-workspace > .v2-inline-state { margin: 0; } .v2-ops-workspace.is-health .v2-ops-kpis { gap: 12px; } .v2-ops-workspace.is-health .v2-ops-kpi-card > .semi-card-body { min-height: 112px; padding: 16px !important; } .v2-ops-workspace.is-health .v2-ops-kpis small { color: #687a91; font-size: 12px; font-weight: 600; } .v2-ops-workspace.is-health .v2-ops-kpis strong { margin: 9px 0 7px; color: #1f3249; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.05; } .v2-ops-workspace.is-health .v2-ops-kpis span { font-size: 11px; } .v2-ops-workspace.is-health .v2-ops-grid { gap: 12px; } .v2-ops-source-title small, .v2-ops-source-evidence strong, .v2-ops-source-action strong, .v2-ops-source-evidence p, .v2-ops-source-action p, .v2-ops-source-card footer span { font-size: 11px; } .v2-ops-source-title .semi-tag, .v2-ops-source-card > .semi-card-header .v2-ops-health-tag.semi-tag, .v2-ops-source-card footer .semi-tag { font-size: 10px; } .v2-ops-source-evidence, .v2-ops-source-action { min-height: 96px; } @media (max-width: 900px) { .v2-ops-tabs { width: 100%; } .v2-ops-workspace.is-health .v2-ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-ops-workspace.is-health .v2-ops-kpi-card:last-child { grid-column: 1 / -1; } } @media (max-width: 680px) { .v2-ops-tabs { position: sticky; z-index: 8; top: 0; min-height: 50px; gap: 3px; border-radius: 10px; padding: 4px; } .v2-ops-tabs > .semi-button { min-height: 40px; padding-inline: 7px; font-size: 11px; } .v2-ops-workspace { gap: 10px; } .v2-ops-workspace.is-health .v2-ops-kpis { gap: 8px; } .v2-ops-workspace.is-health .v2-ops-kpi-card > .semi-card-body { min-height: 100px; padding: 13px !important; } .v2-ops-workspace.is-health .v2-ops-kpis small { font-size: 11px; } .v2-ops-workspace.is-health .v2-ops-kpis strong { font-size: 21px; } .v2-ops-workspace.is-health .v2-ops-kpis span { font-size: 10px; } } /* Semi UI alert command center: one shared hierarchy for events, rules and notifications. */ .v2-alert-page { gap: 12px; overflow: hidden; padding: 14px 18px 18px; background: #f4f7fb; } .v2-alert-tabs.v2-segmented-tabs { display: grid; width: min(540px, 100%); min-height: 52px; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); align-self: flex-start; gap: 5px; overflow: visible; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; margin: 0; padding: 5px; box-shadow: 0 5px 18px rgba(31, 53, 80, .045); } .v2-alert-tabs.v2-segmented-tabs > .semi-button { width: 100%; min-height: 40px; justify-content: center; border-radius: 8px; color: #617188; font-size: 12px; font-weight: 650; } .v2-alert-tabs.v2-segmented-tabs > .semi-button::after { display: none; } .v2-alert-tabs.v2-segmented-tabs > .semi-button:hover { background: #f3f6fa; color: #2d527f; } .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active { background: #1268f3; color: #fff; box-shadow: 0 5px 14px rgba(18, 104, 243, .2); } .v2-alert-tabs .v2-segmented-tab-label { justify-content: center; gap: 7px; } .v2-alert-tabs .v2-segmented-tab-count { min-width: 19px; min-height: 19px; background: rgba(255, 255, 255, .2); color: inherit; font-size: 9px; } .v2-alert-tabs > .semi-button:not(.is-active) .v2-segmented-tab-count { background: #fff0ed; color: #d9473f; } .v2-alert-filter-card.semi-card, .v2-alert-kpis-card.semi-card, .v2-alert-table-card.semi-card, .v2-alert-inspector.semi-card, .v2-alert-rule-list.semi-card, .v2-alert-rule-editor.semi-card, .v2-alert-notifications.semi-card { border-color: #dce5ef; border-radius: 12px; box-shadow: 0 6px 22px rgba(31, 53, 80, .045); } .v2-alert-filter { gap: 10px; padding: 12px 14px; } .v2-alert-filter label { gap: 6px; color: #66778e; font-size: 12px; font-weight: 600; } .v2-alert-filter label > .semi-input-wrapper, .v2-alert-filter label > .semi-select, .v2-alert-filter > .semi-button { min-height: 40px; border-radius: 8px; } .v2-alert-filter .semi-input, .v2-alert-filter .semi-select-selection-text, .v2-alert-filter > .semi-button { font-size: 13px; } .v2-alert-kpis-card.semi-card { min-height: 84px; } .v2-alert-kpis { min-height: 84px; } .v2-alert-kpis .v2-metric-action-content { min-height: 84px; } .v2-alert-kpis small { color: #687991; font-size: 12px; font-weight: 600; } .v2-alert-kpis strong { margin-top: 8px; font-size: 24px; font-weight: 750; } .v2-alert-workspace { min-height: 0; flex: 1 1 0; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; } .v2-alert-workspace.is-inspector-open { grid-template-columns: minmax(690px, 1fr) minmax(360px, 390px); } .v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header { min-height: 54px; padding: 9px 14px; } .v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography { font-size: 15px; } .v2-alert-table-card .v2-workspace-panel-meta { font-size: 11px; } .v2-alert-table-card .v2-workspace-panel-actions > .semi-button { min-height: 36px; padding-inline: 11px; font-size: 12px; } .v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper { color: #42536a; font-size: 12px; } .v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 44px; background: #f7f9fc; color: #5e7087; font-size: 12px; font-weight: 650; } .v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 52px; color: #47586e; font-size: 12px; } .v2-alert-event-vehicle strong { color: #2b4058; font-size: 13px; } .v2-alert-event-vehicle small { color: #8794a5; font-size: 10px; } .v2-alert-event-rule, .v2-alert-event-location { font-size: 12px; } .v2-alert-table-card > .semi-card-body > footer { min-height: 48px; padding: 7px 12px; } .v2-alert-inspector.semi-card { background: #f6f8fb; } .v2-alert-inspector > .semi-card-body > .v2-alert-inspector-heading { position: sticky; z-index: 5; top: 0; min-height: 68px; align-items: center; border-bottom: 1px solid #dfe7f1; background: rgba(255, 255, 255, .98); padding: 11px 14px; backdrop-filter: blur(12px); } .v2-alert-inspector-heading > .v2-workspace-panel-copy > h5.semi-typography { max-width: 250px; color: #23384f; font-size: 15px; line-height: 1.35; } .v2-alert-inspector-heading > .v2-workspace-panel-actions { max-width: none; flex-wrap: nowrap; } .v2-alert-inspector-status { display: flex; align-items: center; gap: 6px; } .v2-alert-inspector-status .semi-tag { min-height: 24px; font-size: 10px; } .v2-alert-inspector-close.semi-button { width: 32px; min-width: 32px; height: 32px; border-radius: 8px; color: #6d7c90; } .v2-alert-inspector-content { gap: 12px; padding: 12px; } .v2-alert-detail-card > .semi-card-header { min-height: 46px; padding: 0 13px; } .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title h6, .v2-alert-detail-card > .semi-card-header .semi-card-header-wrapper-title > strong { font-size: 13px; } .v2-alert-descriptions .semi-descriptions-item { padding: 10px 12px; } .v2-alert-descriptions .semi-descriptions-key { font-size: 11px; } .v2-alert-descriptions .semi-descriptions-value { font-size: 12px; } .v2-alert-descriptions code { font-size: 11px; } .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body { min-height: 80px; } .v2-alert-evidence small { font-size: 11px; } .v2-alert-evidence strong { font-size: 15px; } .v2-alert-timeline .semi-timeline-item-content strong { font-size: 12px; } .v2-alert-timeline .semi-timeline-item-content-time, .v2-alert-timeline .semi-timeline-item-content p { font-size: 10px; } .v2-alert-disposition-card .v2-alert-actions > .semi-button { min-height: 38px; font-size: 12px; } .v2-alert-inspector > .semi-card-body > .v2-alert-links { min-height: 52px; } .v2-alert-inspector > .semi-card-body > .v2-alert-links a { min-height: 36px; font-size: 11px; } .v2-alert-rules { min-height: 0; flex: 1 1 0; grid-template-columns: minmax(340px, 370px) minmax(620px, 1fr); gap: 12px; } .v2-alert-rule-list > .semi-card-body > .v2-alert-rule-list-heading, .v2-alert-rule-editor-form > .v2-alert-rule-editor-heading { min-height: 64px; flex: 0 0 auto; border-bottom: 1px solid #dfe7f1; background: rgba(255, 255, 255, .98); padding: 10px 14px; } .v2-alert-rule-editor-form > .v2-alert-rule-editor-heading { position: sticky; z-index: 4; top: 0; } .v2-alert-rule-list-heading .v2-workspace-panel-copy > h5.semi-typography, .v2-alert-rule-editor-heading .v2-workspace-panel-copy > h5.semi-typography { color: #253a52; font-size: 15px; } .v2-alert-rule-list-heading .v2-workspace-panel-copy > .semi-typography, .v2-alert-rule-editor-heading .v2-workspace-panel-copy > .semi-typography { font-size: 11px; } .v2-alert-rule-list-heading .v2-workspace-panel-actions > .semi-button, .v2-alert-rule-editor-heading .v2-workspace-panel-actions > .semi-button { min-height: 36px; padding-inline: 12px; font-size: 12px; } .v2-alert-rule-item.semi-button { min-height: 76px; padding: 10px 13px; } .v2-alert-rule-copy > span > strong { color: #2d425a; font-size: 13px; } .v2-alert-rule-copy > small { margin-top: 7px; color: #7a899d; font-size: 11px; } .v2-alert-rule-copy .semi-tag, .v2-alert-rule-state.semi-tag { font-size: 10px; } .v2-alert-rule-templates { padding: 15px 16px; } .v2-alert-rule-templates > div > strong { color: #30465e; font-size: 13px; } .v2-alert-rule-templates > div > span { font-size: 11px; } .v2-alert-rule-templates > nav { gap: 10px; } .v2-alert-template-card.semi-button { min-height: 88px; border-radius: 10px; padding: 12px; } .v2-alert-template-copy b { font-size: 13px; } .v2-alert-template-copy small { margin-top: 6px; font-size: 11px; line-height: 1.5; } .v2-rule-form-grid { gap: 14px 16px; padding: 18px 16px 20px; } .v2-rule-form-grid label { gap: 7px; color: #607188; font-size: 12px; font-weight: 600; } .v2-rule-form-grid label > .semi-input-wrapper, .v2-rule-form-grid label > .semi-select { min-height: 40px; border-radius: 8px; } .v2-rule-form-grid .semi-input, .v2-rule-form-grid .semi-select-selection-text { font-size: 13px; } .v2-rule-form-grid .semi-input-textarea { font-size: 13px; line-height: 1.6; } .v2-alert-rule-editor-form > footer { min-height: 64px; padding: 10px 16px; } .v2-alert-rule-editor-form > footer b { font-size: 12px; } .v2-alert-rule-editor-form > footer span, .v2-alert-rule-editor-form > footer em { font-size: 10px; } .v2-alert-rule-editor-form > footer > .semi-button { min-height: 40px; font-size: 12px; } .v2-alert-notifications > .semi-card-body > .v2-workspace-panel-header { min-height: 60px; padding: 10px 14px; } .v2-alert-notifications .v2-workspace-panel-copy > h5.semi-typography { font-size: 15px; } .v2-alert-notifications .v2-workspace-panel-copy > .semi-typography { font-size: 11px; } .v2-alert-notification-list { padding: 12px; } .v2-alert-notification-cards.semi-card-group { gap: 12px; } .v2-alert-notification-card > .semi-card-header { min-height: 54px; padding: 0 12px; } .v2-alert-notification-title > span:last-child { font-size: 13px; } .v2-alert-notification-content { font-size: 12px; line-height: 1.65; } .v2-alert-notification-card footer .semi-typography, .v2-alert-notification-card footer .semi-button { font-size: 11px; } @media (max-width: 1180px) { .v2-alert-workspace { grid-template-columns: minmax(620px, 1fr) 340px; } .v2-alert-rules { grid-template-columns: 330px minmax(560px, 1fr); } } @media (max-width: 900px) { .v2-alert-page { height: auto; min-height: 100%; overflow: auto; } .v2-alert-workspace { display: flex; min-height: 0; flex-direction: column; } .v2-alert-rules { display: flex; min-height: 0; flex: none; flex-direction: column; overflow: visible; } .v2-alert-table-card { min-height: 620px; } .v2-alert-rule-list { max-height: 330px; flex: none; } .v2-alert-rule-editor.semi-card { flex: none; overflow: visible; } .v2-alert-rule-editor-form > .v2-alert-rule-editor-heading { position: static; } } @media (max-width: 1280px) and (min-width: 681px) { .v2-alert-workspace.is-inspector-open { position: relative; grid-template-columns: minmax(0, 1fr); } .v2-alert-workspace.is-inspector-open > .v2-alert-inspector { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: min(390px, calc(100% - 56px)); box-shadow: -12px 0 38px rgba(24, 38, 58, .16); } } @media (max-width: 680px) { .v2-alert-page { gap: 10px; padding: 10px 8px 18px; } .v2-alert-tabs.v2-segmented-tabs { position: sticky; z-index: 8; top: 0; width: 100%; min-height: 50px; grid-auto-columns: minmax(112px, 1fr); gap: 3px; overflow-x: auto; padding: 4px; } .v2-alert-tabs.v2-segmented-tabs > .semi-button { min-height: 40px; padding-inline: 7px; font-size: 11px; } .v2-alert-filter { gap: 9px; padding: 11px; } .v2-alert-filter label { font-size: 11px; } .v2-alert-filter label > .semi-input-wrapper, .v2-alert-filter label > .semi-select, .v2-alert-filter > .semi-button { min-height: 42px; } .v2-alert-kpis-card.semi-card { min-height: 112px; } .v2-alert-kpis { display: grid; min-height: 112px; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; } .v2-alert-kpis .v2-metric-action { min-width: 0; flex-basis: auto; border-top: 1px solid transparent; scroll-snap-align: none; } .v2-alert-kpis .v2-metric-action:nth-child(n + 5) { border-top-color: #e5ebf2; } .v2-alert-kpis .v2-metric-action:nth-child(4n + 1)::before { display: none; } .v2-alert-kpis .v2-metric-action.is-notice { grid-column: span 2; } .v2-alert-kpis .v2-metric-action-content { min-height: 56px; } .v2-alert-kpis small { font-size: 10px; } .v2-alert-kpis strong { margin-top: 5px; font-size: 19px; } .v2-alert-table-card { min-height: 440px; } .v2-alert-mobile-card-content { padding: 13px; } .v2-alert-mobile-card-content header > strong { font-size: 14px; } .v2-alert-mobile-card-content p { font-size: 13px; } .v2-alert-mobile-card-content dt { font-size: 10px; } .v2-alert-mobile-card-content dd { font-size: 12px; } .v2-alert-inspector > .semi-card-body > .v2-alert-inspector-heading { position: static; min-height: 64px; align-items: center; } .v2-alert-workspace.is-inspector-open > .v2-alert-inspector { position: fixed; z-index: 80; top: 52px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); left: 8px; width: auto; max-height: none; overflow: auto; border-radius: 14px; box-shadow: 0 18px 52px rgba(20, 35, 55, .22); animation: v2-mobile-sheet-enter .18s ease-out; } .v2-alert-inspector-heading > .v2-workspace-panel-copy > h5.semi-typography { max-width: 210px; font-size: 14px; } .v2-alert-inspector-heading > .v2-workspace-panel-actions { max-width: none; } .v2-alert-inspector-content { gap: 9px; padding: 9px; } .v2-alert-rule-list > .semi-card-body > .v2-alert-rule-list-heading, .v2-alert-rule-editor-form > .v2-alert-rule-editor-heading { min-height: 64px; align-items: center; padding: 9px 10px; } .v2-alert-rule-list-heading .v2-workspace-panel-copy > h5.semi-typography, .v2-alert-rule-editor-heading .v2-workspace-panel-copy > h5.semi-typography { font-size: 14px; } .v2-alert-rule-list-heading .v2-workspace-panel-copy > .semi-typography, .v2-alert-rule-editor-heading .v2-workspace-panel-copy > .semi-typography { max-width: 190px; font-size: 10px; } .v2-alert-rule-list-heading .v2-workspace-panel-actions > .semi-button, .v2-alert-rule-editor-heading .v2-workspace-panel-actions > .semi-button { min-height: 38px; } .v2-alert-rule-item.semi-button { min-height: 72px; padding: 9px 11px; } .v2-alert-rule-copy > span > strong { font-size: 12px; } .v2-alert-rule-copy > small { font-size: 10px; } .v2-alert-rule-templates { padding: 12px; } .v2-alert-rule-templates > nav { grid-template-columns: 1fr; } .v2-alert-template-card.semi-button { min-height: 84px; } .v2-rule-form-grid { grid-template-columns: 1fr; gap: 13px; padding: 14px 12px 18px; } .v2-rule-form-grid label.is-wide { grid-column: auto; } .v2-rule-form-grid label { font-size: 11px; } .v2-rule-form-grid label > .semi-input-wrapper, .v2-rule-form-grid label > .semi-select { min-height: 42px; } .v2-alert-rule-editor-form > footer { min-height: 0; padding: 12px; } .v2-alert-notification-list { padding: 8px; } .v2-alert-notification-card > .semi-card-header { min-height: 50px; padding: 0 10px; } .v2-alert-notification-title > span:last-child { font-size: 12px; } .v2-alert-notification-content { font-size: 11px; } } /* Semi UI vehicle lookup: one stable workspace, with suggestions revealed only after user intent. */ .v2-vehicle-search-page { align-content: start; place-items: start center; gap: 14px; overflow: auto; background: var(--v2-bg); padding: clamp(24px, 4vh, 40px) var(--v2-page-gutter) 32px; } .v2-vehicle-search-card.semi-card, .v2-vehicle-recent-card.semi-card { width: min(1040px, 100%); border-color: var(--v2-surface-border); border-radius: 14px; box-shadow: var(--v2-surface-shadow); text-align: left; } .v2-vehicle-search-card > .semi-card-body { padding: 32px 36px 28px; } .v2-vehicle-search-intro { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 18px; } .v2-vehicle-search-intro .v2-search-hero-icon { width: 56px; height: 56px; margin: 0; border-radius: 14px; box-shadow: none; } .v2-vehicle-search-intro h2.semi-typography { margin: 0; color: #172033; font-size: 24px; font-weight: 740; letter-spacing: -.035em; line-height: 1.2; } .v2-vehicle-search-intro .semi-typography-secondary { display: block; max-width: 670px; margin-top: 7px; color: #718096; font-size: 13px; line-height: 1.65; } .v2-vehicle-search-form { position: relative; box-sizing: border-box; width: 100%; min-width: 0; height: 54px; margin-top: 24px; overflow: visible; border-color: #d7e1ed; background: #f8fafc; } .v2-vehicle-search-form > .v2-vehicle-search-picker { position: relative; min-width: 0; flex: 1 1 auto; } .v2-vehicle-search-form > .v2-vehicle-search-picker > .semi-input-wrapper { width: 100%; } .v2-vehicle-search-form > .semi-button { min-width: 126px; height: 44px; margin-right: 5px; border-radius: 9px; } .v2-vehicle-search-options.v2-vehicle-candidate-list { position: absolute; z-index: 40; box-sizing: border-box; min-width: 0; top: calc(100% + 13px); left: 0; width: 100%; max-height: min(354px, 46vh); overflow: auto; border: 1px solid #d9e3ef; border-radius: 12px; background: #fff; box-shadow: 0 22px 54px rgba(24, 45, 75, .16); text-align: left; overscroll-behavior: contain; } .v2-vehicle-search-options.v2-vehicle-candidate-list > header { position: sticky; z-index: 1; top: 0; min-height: 42px; padding-inline: 14px; background: rgba(249, 251, 254, .96); backdrop-filter: blur(10px); } .v2-vehicle-search-options.v2-vehicle-candidate-list > .v2-vehicle-option.semi-button { min-height: 58px; padding: 8px 13px; } .v2-vehicle-search-options.is-grid > .v2-vehicle-option .semi-button-content { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; } .v2-vehicle-search-options.is-grid .v2-vehicle-option-protocols { grid-column: 1; } .v2-vehicle-search-options.is-grid .v2-vehicle-option-action.semi-tag { grid-column: 2; grid-row: 1 / span 2; } .v2-vehicle-search-options .v2-vehicle-option-identity strong { font-size: 12px; } .v2-vehicle-search-options .v2-vehicle-option-identity small { font-size: 9px; } .v2-vehicle-search-card .v2-profile-sync-open.semi-button { display: flex; width: max-content; margin: 16px 0 0 auto; } .v2-vehicle-recent-card > .semi-card-body { overflow: hidden; border-radius: inherit; } .v2-vehicle-recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; } .v2-vehicle-recent-item.semi-button { display: block; width: 100%; min-width: 0; height: auto; min-height: 82px; border: 1px solid #e3eaf2; border-radius: 10px; background: #fbfcfe; padding: 11px 34px 10px 12px; color: #26374d; text-align: left; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; } .v2-vehicle-recent-item.semi-button:hover, .v2-vehicle-recent-item.semi-button:focus-visible { border-color: #b8d1fb; background: #f5f9ff; box-shadow: 0 6px 18px rgba(33, 102, 217, .08); transform: translateY(-1px); } .v2-vehicle-recent-item .semi-button-content { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px; } .v2-vehicle-recent-identity { display: grid; min-width: 0; gap: 3px; } .v2-vehicle-recent-identity strong { overflow: hidden; color: #182438; font-size: 14px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-recent-identity small, .v2-vehicle-recent-status small { overflow: hidden; color: #8391a4; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .v2-vehicle-recent-status { display: grid; justify-items: end; gap: 4px; } .v2-vehicle-recent-protocols { display: flex; min-width: 0; gap: 4px; } .v2-vehicle-recent-protocols .semi-tag, .v2-vehicle-recent-status .semi-tag { margin: 0; } .v2-vehicle-recent-arrow { position: absolute; top: 50%; right: -24px; color: #9aabba; transform: translateY(-50%); } .v2-vehicle-recent-state { display: flex; min-height: 128px; align-items: center; justify-content: center; gap: 9px; color: #718096; font-size: 12px; } .v2-vehicle-recent-state.is-error { flex-direction: column; color: var(--semi-color-danger); } .v2-vehicle-recent-empty.semi-empty { padding: 22px 16px 28px; } @media (max-width: 680px) { .v2-vehicle-search-page { align-content: start; overflow: auto; padding: 12px 10px 96px; } .v2-vehicle-search-form > .v2-vehicle-search-picker { width: auto; flex: 1 1 100%; } .v2-vehicle-search-card.semi-card, .v2-vehicle-recent-card.semi-card { width: 100%; min-width: 0; border-radius: 12px; } .v2-vehicle-search-card > .semi-card-body { padding: 20px 14px 16px; } .v2-vehicle-search-intro { grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 11px; } .v2-vehicle-search-intro .v2-search-hero-icon { display: grid; width: 44px; height: 44px; border-radius: 11px; } .v2-vehicle-search-intro h2.semi-typography { font-size: 18px; text-align: left; } .v2-vehicle-search-intro .semi-typography-secondary { display: -webkit-box; max-width: none; margin: 4px 0 0; overflow: hidden; font-size: 11px; line-height: 1.55; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .v2-vehicle-search-form { height: auto; margin-top: 16px; gap: 8px; border: 0; background: transparent; padding: 0; } .v2-vehicle-search-form > .v2-vehicle-search-picker { height: 48px; border: 1px solid #d7e1ed; border-radius: 10px; background: #f8fafc; padding-inline: 4px; } .v2-vehicle-search-form > .semi-button { width: 100%; height: 46px; margin: 0; } .v2-vehicle-search-options.v2-vehicle-candidate-list { position: static; width: 100%; max-height: min(390px, 49vh); margin-top: 8px; border-radius: 10px; box-shadow: 0 14px 38px rgba(24, 45, 75, .13); } .v2-vehicle-search-options.v2-vehicle-candidate-list > .v2-vehicle-option .semi-button-content, .v2-vehicle-search-options.is-grid > .v2-vehicle-option .semi-button-content { grid-template-columns: minmax(0, 1fr) auto; } .v2-vehicle-search-options .v2-vehicle-option-protocols { grid-column: 1; } .v2-vehicle-search-options .v2-vehicle-option-action.semi-tag { grid-column: 2; grid-row: 1 / span 2; } .v2-vehicle-search-card .v2-profile-sync-open.semi-button { width: 100%; justify-content: center; margin-top: 12px; } .v2-vehicle-recent-grid { grid-template-columns: 1fr; gap: 0; padding: 4px 10px 8px; } .v2-vehicle-recent-item.semi-button { min-height: 62px; border: 0; border-bottom: 1px solid #edf1f6; border-radius: 0; background: transparent; padding: 8px 28px 8px 2px; } .v2-vehicle-recent-item.semi-button:last-child { border-bottom: 0; } .v2-vehicle-recent-item.semi-button:hover, .v2-vehicle-recent-item.semi-button:focus-visible { background: #f5f9ff; box-shadow: none; transform: none; } .v2-vehicle-recent-identity strong { font-size: 13px; } .v2-vehicle-recent-arrow { right: -20px; } } /* Semi UI history hierarchy: keep evidence rows primary and aggregate trends explicitly on demand. */ .v2-history-trend.is-collapsed.semi-card { height: 56px; min-height: 56px; } .v2-history-trend.is-collapsed > .semi-card-body { height: 56px; } .v2-history-trend.is-collapsed .v2-workspace-panel-header { height: 56px; min-height: 56px; border-bottom: 0; } .v2-history-trend-toggle.semi-button { min-width: 86px; height: 32px; border-radius: 7px; padding-inline: 9px; color: #607086; font-size: 11px; } .v2-history-trend-toggle.semi-button:hover { background: #f1f6fd; color: var(--v2-blue); } .v2-history-trend-toggle .semi-icon { transition: transform .18s ease; } .v2-history-trend-toggle.is-expanded .semi-icon { transform: rotate(90deg); } @media (min-width: 901px) { .v2-history-main { grid-template-rows: 76px 56px minmax(210px, 1fr); } .v2-history-main.has-expanded-trend { grid-template-rows: 76px 205px minmax(210px, 1fr); } .v2-history-trend.is-expanded.semi-card { height: 205px; min-height: 205px; } } @media (max-width: 900px) { .v2-history-trend { order: 0; margin-top: 0; } .v2-history-trend.is-collapsed.semi-card { height: 56px; min-height: 56px; } .v2-history-trend.is-expanded.semi-card { height: auto; min-height: 220px; } .v2-history-trend-toggle.semi-button { min-width: 88px; height: 38px; font-size: 12px; } } /* Semi UI operations queue: render one responsive result surface and keep filters/trends task-focused. */ .v2-reconcile-trend-toggle.semi-button { min-width: 68px; height: 34px; border-radius: 8px; color: #55708f; font-size: 11px; } @media (max-height: 800px) and (min-width: 901px) { .v2-ops-page > .v2-page-heading { min-height: 62px; padding-block: 2px; } .v2-ops-tabs { min-height: 46px; padding: 4px; } .v2-ops-tabs > .semi-button { height: 36px; } .v2-reconcile-heading.v2-workspace-panel-header { min-height: 64px; } .v2-reconcile-kpis { padding: 8px 10px; } .v2-reconcile-kpi-card > .semi-card-body { min-height: 72px; padding: 9px 12px !important; } } @media (max-width: 680px) { .v2-reconcile-layout { display: flex; flex-direction: column; } .v2-reconcile-main { order: 1; } .v2-reconcile-trend { order: 2; } .v2-reconcile-main > .v2-mobile-filter-toggle { margin: 8px; width: calc(100% - 16px); } .v2-reconcile-trend.is-mobile-collapsed.semi-card { height: 58px; min-height: 58px; overflow: hidden; } .v2-reconcile-trend.is-mobile-collapsed > .semi-card-body { height: 56px; padding: 0 !important; } .v2-reconcile-trend.is-mobile-collapsed .v2-workspace-panel-header { min-height: 56px; border-bottom: 0; padding-inline: 12px; } .v2-reconcile-trend.is-mobile-collapsed .v2-workspace-panel-actions { margin-left: auto; } .v2-reconcile-trend-toggle.semi-button { min-width: 72px; height: 38px; font-size: 12px; } } /* Semi UI account directory: list first, edit in a focused inspector. */ .v2-user-admin-grid { display: block; min-height: 0; } .v2-user-list.semi-card { position: static; max-height: none; } .v2-user-directory-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; } .v2-user-directory-metrics > span { display: grid; min-height: 68px; align-content: center; gap: 5px; border: 1px solid #e1e8f1; border-radius: 10px; background: #f7f9fc; padding: 10px 13px; } .v2-user-directory-metrics small { color: #7a889b; font-size: 10px; font-weight: 600; } .v2-user-directory-metrics strong { color: #21364f; font-size: 21px; line-height: 1; } .v2-customer-list .semi-list-items { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,680px),1fr)); gap: 8px; } .v2-customer-list .v2-user-list-row.semi-list-item, .v2-customer-list .v2-user-list-item.semi-button, .v2-customer-list .v2-user-list-item .semi-button-content, .v2-user-list-identity, .v2-user-list-facts, .v2-user-list-trailing { min-width: 0; } .v2-customer-list .v2-user-list-item.semi-button { min-height: 76px; padding: 10px 12px; } .v2-customer-list .v2-user-list-item .semi-button-content { grid-template-columns: 38px minmax(170px,1.35fr) minmax(72px,.5fr) minmax(72px,.5fr) minmax(150px,.9fr) auto; gap: 12px; } .v2-user-list-facts { display: grid; min-width: 0; gap: 4px; } .v2-user-list-facts small { color: #8a97a8; font-size: 9px; } .v2-user-list-facts b { overflow: hidden; color: #43576e; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .v2-user-editor.semi-card { position: fixed; z-index: 33; top: 68px; right: 0; bottom: 0; width: min(900px,78vw); overflow: hidden; border: 0; border-left: 1px solid #cbd8e8; border-radius: 0; box-shadow: -16px 0 42px rgba(20,37,59,.16); } .v2-user-editor > .semi-card-body { height: 100%; } .v2-user-editor form { height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; } .v2-user-editor-title { position: sticky; z-index: 4; top: 0; } .v2-user-editor-close.semi-button { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; color: #65768a; } /* Semi UI operations: keep the queue before secondary trend evidence on small screens. */ @media (max-width: 680px) { .v2-user-admin-grid { display: block; } .v2-user-list > .semi-card-body { display: block; padding: 10px; } .v2-user-directory-heading { padding-bottom: 9px; } .v2-user-directory-metrics { gap: 6px; margin-bottom: 9px; } .v2-user-directory-metrics > span { min-height: 58px; padding: 8px 10px; } .v2-user-directory-metrics small { font-size: 9px; } .v2-user-directory-metrics strong { font-size: 19px; } .v2-user-list-search.semi-input-wrapper { display: flex; min-height: 42px; margin-bottom: 9px; } .v2-customer-list.semi-list { display: block; overflow: visible; } .v2-customer-list .semi-list-items { grid-template-columns: minmax(0,1fr); gap: 7px; } .v2-customer-list .v2-user-list-item.semi-button { min-height: 88px; padding: 10px; } .v2-customer-list .v2-user-list-item .semi-button-content { grid-template-columns: 36px minmax(0,1fr) 70px auto; grid-template-rows: auto auto; gap: 5px 9px; } .v2-user-avatar { grid-row: 1 / 3; } .v2-user-list-identity { grid-column: 2 / 4; grid-row: 1; } .v2-user-list-facts { grid-row: 2; } .v2-user-list-facts.is-login { display: none; } .v2-user-list-trailing { grid-column: 4; grid-row: 1 / 3; } .v2-user-editor.semi-card { inset: 54px 0 66px; width: auto; border-left: 0; } .v2-user-editor-title { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; } .v2-user-editor-close.semi-button { width: 40px; height: 40px; } .v2-reconcile-kpis { display: grid; overflow: visible; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .v2-reconcile-kpi-card.semi-card { min-width: 0; flex: initial; } .v2-reconcile-kpi-card:last-child { grid-column: 1 / -1; } .v2-reconcile-kpi-card > .semi-card-body { min-height: 72px; padding: 9px 10px !important; } .v2-reconcile-kpis strong { font-size: 20px; } .v2-reconcile-detail.semi-card { bottom: 66px; } } /* Semi UI customer workspace: align replay and mileage density with the monitor. */ @media (min-width: 701px) { .v2-track-query-header.v2-workspace-panel-header { min-height: 58px; padding-inline: 15px 10px; } .v2-track-query-header .v2-workspace-panel-copy > h5.semi-typography { font-size: 16px; } .v2-track-query-header .v2-workspace-panel-copy > .semi-typography { font-size: 11px; } .v2-track-query { padding: 14px 16px 16px; } .v2-track-query > label, .v2-track-date-grid label { color: #66788f; font-size: 12px; font-weight: 600; } .v2-track-vehicle-picker > .semi-input-wrapper .semi-input, .v2-track-date-grid .semi-input, .v2-track-query > label > .semi-select .semi-select-selection-text { font-size: 13px; } .v2-track-presets { gap: 7px; } .v2-track-presets > .semi-button { height: 34px; border-radius: 8px; font-size: 12px; } .v2-track-presets > .semi-button-solid { background: #edf4ff; color: var(--v2-blue); box-shadow: inset 0 0 0 1px #bdd4f8; } .v2-track-query > .v2-track-query-button.semi-button { height: 42px; border-radius: 9px; font-size: 13px; } .v2-track-result-header.v2-workspace-panel-header { min-height: 52px; padding-inline: 14px; } .v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography { font-size: 14px; } .v2-track-result-header .v2-workspace-panel-copy > .semi-typography, .v2-track-result-header .v2-workspace-panel-meta { font-size: 11px; } .v2-track-rail-tabs > .semi-button { height: 42px; font-size: 12px; } .v2-track-rail-tabs .v2-segmented-tab-count { min-width: 18px; min-height: 18px; font-size: 9px; } .v2-track-evidence-list button strong { font-size: 12px; } .v2-track-evidence-list button small, .v2-track-evidence-list .v2-track-list-action .semi-button-content > em { font-size: 10px; } .v2-track-coverage-float { width: min(560px, calc(100% - 420px)); min-height: 40px; grid-template-columns: 8px minmax(0, 1fr) auto; border-radius: 9px; padding: 6px 12px; } .v2-track-coverage-float > span { display: flex; min-width: 0; align-items: center; gap: 8px; } .v2-track-coverage-float > span strong { flex: 0 0 auto; margin: 0; font-size: 12px; } .v2-track-coverage-float > span small { min-width: 0; overflow: hidden; color: #748399; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .v2-track-coverage-float > em { font-size: 10px; } .v2-track-current-card.semi-card { top: 68px; width: 320px; border-radius: 10px; } .v2-track-current-card small { font-size: 10px; } .v2-track-current-card > .semi-card-body > div strong { font-size: 13px; } .v2-track-current-card > .semi-card-body > p { font-size: 11px; } .v2-track-stage-tools > .semi-button { min-height: 40px; border-radius: 10px; padding-inline: 12px; font-size: 12px; } .v2-track-dock-summary span, .v2-track-progress-meta, .v2-track-dock-controls label { font-size: 11px; } .v2-mileage-filter > label { color: #66788f; font-size: 11px; font-weight: 600; } .v2-mileage-filter > label > .semi-input-wrapper, .v2-mileage-source-trigger.semi-button, .v2-mileage-filter > .semi-button-primary { height: 38px; min-height: 38px; } .v2-mileage-selection > .semi-input-wrapper .semi-input, .v2-mileage-filter > label > .semi-input-wrapper .semi-input { font-size: 12px; } .v2-mileage-ranges { height: 38px; } .v2-mileage-ranges .semi-button { height: 32px; font-size: 11px; } .v2-mileage-results > .semi-card-body > header { min-height: 50px; } .v2-mileage-results > .semi-card-body > header strong { font-size: 15px; } .v2-mileage-results > .semi-card-body > header span, .v2-mileage-results > .semi-card-body > header em { font-size: 11px; } .v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head { height: 44px; font-size: 11px; } .v2-mileage-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { height: 54px; font-size: 12px; } .v2-mileage-table .semi-table-row-cell.is-daily { font-size: 11px; } .v2-mileage-table .semi-table-row-cell.is-period { font-size: 12px; } .v2-mileage-results > .semi-card-body > footer, .v2-mileage-evidence { font-size: 10px; } } @media (max-width: 700px) { .v2-track-vehicle-options.v2-vehicle-candidate-list { max-height: min(300px, 42vh); } .v2-track-coverage-float > span { min-width: 0; } .v2-track-coverage-float > span small { display: none; } .v2-track-current-card small { font-size: 10px; } .v2-track-current-card > .semi-card-body > div strong { font-size: 13px; } .v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head { font-size: 10px; } .v2-mileage-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell { font-size: 11px; } .v2-mileage-table .semi-table-row-cell.is-daily { font-size: 10px; } .v2-mileage-table .semi-table-row-cell.is-period { font-size: 11px; } .v2-mileage-result-actions > .semi-button { font-size: 11px; } } /* Semi UI single-vehicle workspace: persistent section navigation and aligned evidence panels. */ .v2-vehicle-record-nav.semi-card { position: sticky; z-index: 24; top: 8px; overflow: hidden; border-color: #d8e3ef; border-radius: 11px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(31, 53, 80, .07); backdrop-filter: blur(12px); } .v2-vehicle-record-nav .v2-workspace-panel-header { min-height: 46px; border-bottom: 0; background: transparent; } .v2-vehicle-record-nav .v2-workspace-panel-actions { max-width: none; } .v2-vehicle-section-nav { display: flex; min-width: 0; align-items: center; gap: 3px; border: 1px solid #e0e7f0; border-radius: 8px; background: #f7f9fc; padding: 3px; } .v2-vehicle-section-nav > .semi-button { min-height: 32px; border-radius: 6px; padding-inline: 10px; color: #53657b; font-size: 11px; font-weight: 650; } .v2-vehicle-section-nav > .semi-button:hover, .v2-vehicle-section-nav > .semi-button:focus-visible { background: #fff; color: var(--v2-blue); box-shadow: 0 1px 5px rgba(31, 53, 80, .09); } .v2-record-section-anchor { min-width: 0; min-height: 0; scroll-margin-top: 68px; outline: none; } .v2-record-section-anchor:focus-visible, .v2-single-map-card:focus-visible { outline: 3px solid rgba(18, 104, 243, .22); outline-offset: 2px; } #vehicle-location-panel { grid-column: 1; grid-row: 1; } #vehicle-events-panel { grid-column: 2; grid-row: 1; } #vehicle-telemetry-panel { grid-column: 1 / -1; grid-row: 2; } #vehicle-archive-panel { grid-column: 1 / -1; grid-row: 3; } .v2-record-section-anchor > .semi-card { width: 100%; height: 100%; } .v2-single-map-card > .semi-card-body > .v2-workspace-panel-header { min-height: 52px; } .v2-telemetry-card > .semi-card-body > .v2-workspace-panel-header { border-bottom-color: #e5ebf3; } @media (max-width: 680px) { .v2-vehicle-record-nav.semi-card { top: 0; border-radius: 10px; } .v2-vehicle-record-nav .v2-workspace-panel-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; } .v2-vehicle-record-nav .v2-workspace-panel-copy > .semi-typography { display: none; } .v2-vehicle-record-nav .v2-workspace-panel-actions { width: 100%; max-width: none; overflow: hidden; } .v2-vehicle-section-nav { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .v2-vehicle-section-nav::-webkit-scrollbar { display: none; } .v2-vehicle-section-nav > .semi-button { min-height: 34px; flex: 0 0 auto; padding-inline: 8px; font-size: 10px; } .v2-record-section-anchor { scroll-margin-top: 60px; } } /* Semi UI vehicle action rail: one consistent, touch-safe command group. */ .v2-vehicle-record-page .v2-identity-actions { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 7px; } .v2-vehicle-record-page .v2-identity-actions > .semi-button { min-width: 102px; min-height: 38px; flex: 0 1 auto; justify-content: center; border-radius: 8px; padding-inline: 12px; font-size: 11px; font-weight: 650; white-space: nowrap; } .v2-vehicle-record-page .v2-identity-actions > .semi-button-primary { border-color: #bfd5fb; background: #edf4ff; color: var(--v2-blue); } .v2-vehicle-record-page .v2-identity-actions > .semi-button:hover { transform: translateY(-1px); } @media (max-width: 1400px) and (min-width: 681px) { .v2-vehicle-record-page .v2-identity-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); } .v2-vehicle-record-page .v2-identity-actions > .semi-button { width: 100%; } } @media (max-width: 680px) { .v2-vehicle-record-page .v2-identity-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .v2-vehicle-record-page .v2-identity-actions > .semi-button { width: 100%; min-width: 0; min-height: 42px; padding-inline: 8px; font-size: 11px; } }