:root { --v2-bg: #f4f7fb; --v2-surface: #ffffff; --v2-text: #152033; --v2-muted: #718096; --v2-border: #e4eaf2; --v2-blue: #1268f3; --v2-blue-soft: #edf4ff; --v2-green: #12a46f; --v2-orange: #f59e0b; --v2-red: #ef4444; --v2-shadow: 0 8px 30px rgba(21, 32, 51, 0.06); --v2-radius: 10px; } * { 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; } 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; grid-template-columns: minmax(360px, 1.15fr) minmax(420px, .85fr); align-items: center; background: #f3f6fa; padding: clamp(28px, 5vw, 80px); } .v2-auth-intro { max-width: 640px; padding: 36px 8vw 36px 4vw; } .v2-auth-intro > img { width: 176px; } .v2-auth-intro h2 { margin: 54px 0 20px; color: #14223a; font-size: clamp(34px, 4vw, 58px); font-weight: 720; line-height: 1.16; letter-spacing: -.055em; } .v2-auth-intro p { max-width: 520px; margin: 0; color: #617087; font-size: 16px; line-height: 1.9; } .v2-auth-intro > div { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 42px; color: #3f5068; font-size: 13px; font-weight: 650; } .v2-auth-intro > div span::before { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--v2-blue); content: ""; } .v2-auth-card { display: flex; width: min(430px, 100%); flex-direction: column; align-items: stretch; border: 1px solid #e0e7f0; border-radius: 18px; background: #fff; padding: 42px; box-shadow: 0 28px 80px rgba(21, 32, 51, .11); } .v2-auth-loading { grid-column: 1 / -1; justify-self: center; } .v2-auth-card > strong { margin-top: 12px; text-align: center; } .v2-auth-logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; } .v2-auth-card h1 { margin: 2px 0 0; text-align: center; font-size: 24px; letter-spacing: -.035em; }.v2-auth-card p { margin: 11px 0 26px; color: var(--v2-muted); text-align: center; font-size: 13px; line-height: 1.7; } .v2-auth-card label { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; color: #44536a; font-size: 13px; font-weight: 650; }.v2-auth-card input { height: 46px; border: 1px solid #d5deea; border-radius: 9px; padding: 0 13px; outline: 0; font-size: 14px; }.v2-auth-card input:focus { border-color: #7aaafb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-auth-card em { margin-top: 12px; color: var(--v2-red); font-size: 12px; font-style: normal; }.v2-auth-card button { height: 46px; margin-top: 22px; border: 0; border-radius: 9px; background: var(--v2-blue); color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }.v2-auth-card button:disabled { opacity: .45; cursor: not-allowed; } .v2-auth-card .v2-auth-mode-switch { height: 36px; margin-top: 8px; background: transparent; color: #68778c; font-size: 12px; font-weight: 600; } .v2-auth-card .v2-auth-mode-switch:hover { color: var(--v2-blue); } .v2-auth-card > small { margin-top: 14px; color: #9aa5b5; text-align: center; font-size: 10px; } .v2-auth-spinner { width: 24px; height: 24px; margin: auto; border: 3px solid #d8e5fa; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; } .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: 188px; flex-direction: column; border-right: 1px solid var(--v2-border); background: #fff; } .v2-brand { display: flex; height: 64px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 0 16px; white-space: nowrap; overflow: hidden; } .v2-brand-logo { display: block; width: 140px; 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; } .v2-nav-item:hover { background: #f7f9fc; color: var(--v2-text); } .v2-nav-item.is-active { background: var(--v2-blue-soft); color: var(--v2-blue); } .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; height: 48px; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--v2-border); background: #fff; padding: 0 22px; color: #64748b; cursor: pointer; } .v2-main { display: flex; height: 100vh; height: 100dvh; min-width: 0; flex-direction: column; margin-left: 188px; } .v2-topbar { position: sticky; top: 0; z-index: 40; display: flex; height: 64px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); background: rgba(255,255,255,.94); padding: 0 24px; backdrop-filter: blur(16px); } .v2-topbar h1 { margin: 0; font-size: 20px; letter-spacing: -.035em; } .v2-topbar-actions { display: flex; align-items: center; gap: 4px; } .v2-topbar-actions button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; } .v2-topbar-actions button:hover { background: #f1f5f9; } .v2-help-backdrop { position: fixed; z-index: 1200; inset: 0; background: rgba(15,23,42,.12); } .v2-help-panel { position: absolute; top: 58px; right: 18px; width: min(390px, calc(100vw - 28px)); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: #fff; padding: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.22); } .v2-help-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .v2-help-panel > header small { color: var(--v2-blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; } .v2-help-panel h2 { margin: 4px 0 0; color: #17253a; font-size: 19px; } .v2-help-panel > header button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 8px; background: #f3f6fa; color: #627086; cursor: pointer; } .v2-help-panel > p { margin: 15px 0; color: #59677c; font-size: 12px; 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: 24px minmax(0,1fr); align-items: start; gap: 9px; border-radius: 8px; background: #f7f9fc; padding: 10px; color: #435168; font-size: 11px; line-height: 1.65; } .v2-help-panel li > span { display: grid; width: 22px; height: 22px; 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: 6px; margin: 0 5px; color: #59677c; font-size: 11px; }.v2-current-user b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-current-user small, .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; padding: 0 7px; } .v2-password-mobile { display: none !important; } .v2-password-backdrop { position: fixed; z-index: 1400; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.28); padding: 16px; } .v2-password-dialog { width: min(410px,100%); border: 1px solid #e0e7ef; border-radius: 14px; background: #fff; padding: 22px; box-shadow: 0 28px 80px rgba(15,23,42,.2); } .v2-password-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.v2-password-dialog h2 { margin: 0; font-size: 19px; }.v2-password-dialog header p { margin: 6px 0 0; color: #8491a3; font-size: 10px; }.v2-password-dialog header button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f2f5f8; color: #66758a; cursor: pointer; } .v2-password-dialog > label { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; color: #5a6980; font-size: 11px; font-weight: 650; }.v2-password-dialog input { height: 40px; border: 1px solid #d8e1ec; border-radius: 8px; padding: 0 10px; outline: 0; font-size: 13px; }.v2-password-dialog input:focus { border-color: #84b0f7; box-shadow: 0 0 0 3px rgba(18,104,243,.07); }.v2-password-dialog > em { display: block; margin-top: 10px; color: var(--v2-red); font-size: 10px; font-style: normal; } .v2-password-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.v2-password-dialog footer button { height: 36px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fff; padding: 0 14px; color: #5d6d83; cursor: pointer; font-size: 11px; font-weight: 650; }.v2-password-dialog footer button[type="submit"] { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }.v2-password-dialog footer button:disabled { opacity: .5; } .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: 68px; } .v2-sidebar.is-collapsed + .v2-main { margin-left: 68px; } .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 { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(120px, 150px) minmax(120px, 150px) auto auto auto auto; gap: 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); } .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 { display: grid; grid-template-columns: repeat(8, minmax(86px, 1fr)); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-kpi { position: relative; min-width: 0; padding: 10px 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; } .v2-kpi strong { display: block; margin-top: 5px; overflow: hidden; color: var(--v2-text); font-size: clamp(16px, 1.45vw, 22px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-kpi.is-online strong, .v2-kpi.is-idle strong { color: var(--v2-green); } .v2-kpi.is-driving strong, .v2-kpi.is-today 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(300px, 17vw, 360px); } .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 { display: grid; width: 100%; min-height: 60px; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-top: 1px solid #eef2f7; background: #fff; padding: 8px 10px; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 60px; } .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 { 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 > header { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--v2-border); padding: 8px 14px; } .v2-monitor-table-panel > header div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-monitor-table-panel > header strong { font-size: 14px; } .v2-monitor-table-panel > header span, .v2-monitor-table-panel > header > b { color: var(--v2-muted); font-size: 11px; font-weight: 500; } .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: 180px; }.v2-monitor-table-scroll th:nth-child(2) { width: 116px; }.v2-monitor-table-scroll th:nth-child(3) { width: 92px; }.v2-monitor-table-scroll th:nth-child(4) { width: 154px; }.v2-monitor-table-scroll th:nth-child(5) { width: 150px; }.v2-monitor-table-scroll th:nth-child(6) { width: auto; }.v2-monitor-table-scroll th:nth-child(7) { width: 148px; } .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 > button { display: flex; max-width: 100%; flex-direction: column; align-items: flex-start; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }.v2-monitor-table-vehicle > button:hover strong { color: var(--v2-blue); } .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 { 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 > button { 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 > 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 > footer div { display: flex; gap: 7px; }.v2-monitor-table-panel > footer button, .v2-monitor-table-panel > 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 > footer button:disabled { cursor: not-allowed; opacity: .45; } .v2-monitor-qr-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(15,23,42,.42); padding: 18px; backdrop-filter: blur(4px); } .v2-monitor-qr-backdrop > section { position: relative; display: flex; width: min(360px, 100%); align-items: center; flex-direction: column; border-radius: 16px; background: #fff; padding: 26px; box-shadow: 0 24px 70px rgba(15,23,42,.26); text-align: center; } .v2-monitor-qr-backdrop > section > button:first-child { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: #6b7a8f; cursor: pointer; }.v2-monitor-qr-backdrop > section > svg { color: var(--v2-blue); font-size: 26px; }.v2-monitor-qr-backdrop h3 { margin: 9px 0 4px; font-size: 17px; }.v2-monitor-qr-backdrop p { margin: 0 0 13px; color: #718096; font-size: 11px; }.v2-monitor-qr-backdrop img { width: 220px; height: 220px; }.v2-monitor-qr-backdrop code { width: 100%; overflow: hidden; margin-top: 10px; border-radius: 6px; background: #f5f7fa; padding: 8px; color: #5f6e82; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.v2-monitor-qr-backdrop > section > button:last-child { width: 100%; height: 38px; margin-top: 10px; border: 0; border-radius: 7px; background: var(--v2-blue); color: #fff; font-weight: 700; cursor: pointer; } .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 button { height: 30px; border: 1px solid #e7a7a7; border-radius: 6px; background: #fff; padding: 0 12px; color: #a53a3a; cursor: pointer; 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-layer-control { display: grid; height: 44px; grid-template-columns: auto auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 10px; color: #435168; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; } .v2-map-layer-control > svg { color: var(--v2-blue); font-size: 15px; } .v2-map-layer-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .v2-map-layer-control strong { font-size: 10px; line-height: 1.2; } .v2-map-layer-control small { color: #7b8ba0; font-size: 8px; } .v2-map-layer-control > i { position: relative; width: 24px; height: 14px; border-radius: 8px; background: #cbd5e1; transition: background .16s; } .v2-map-layer-control > i::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); content: ""; transition: transform .16s; } .v2-map-layer-control > i.is-on { background: var(--v2-blue); } .v2-map-layer-control > i.is-on::after { transform: translateX(10px); } .v2-map-follow-control { display: grid; height: 44px; grid-template-columns: auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 11px; color: #607086; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; transition: border-color .16s, background .16s, color .16s; } .v2-map-follow-control > svg { font-size: 16px; } .v2-map-follow-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .v2-map-follow-control strong { font-size: 10px; line-height: 1.2; } .v2-map-follow-control small { color: #8a98aa; font-size: 8px; } .v2-map-follow-control.is-active { border-color: #9ec0f7; background: #eef5ff; color: #1268f3; } .v2-map-follow-control.is-active small { color: #4e82cf; } .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: 52px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 7px; overflow: hidden; border: 1px solid rgba(126,164,216,.78); border-radius: 9px; background: rgba(255,255,255,.96); padding: 6px 8px 5px; 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 { grid-row: 1 / span 2; grid-column: 2; color: #1268f3; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1; } .v2-province-marker > small { color: #75869b; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; } .v2-province-marker > i { position: relative; height: 3px; grid-column: 1 / -1; overflow: hidden; border-radius: 2px; background: #e7edf5; } .v2-province-marker > i > b { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg,#12a46f,#35c98c); } .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 button { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #f2b8b5; border-radius: 7px; background: #fff; padding: 0 11px; color: #a61b13; cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgba(180,35,24,.08); } .v2-map-state.is-error 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-left: 1px solid var(--v2-border); background: #fff; padding: 14px; animation: v2-panel-enter .14s ease-out; } .v2-detail-controls { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 4px; } .v2-detail-controls button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; color: #68768a; cursor: pointer; transition: border-color .16s, background .16s, color .16s; } .v2-detail-controls button:hover { border-color: #a9c5f2; background: #f1f6ff; color: var(--v2-blue); } .v2-detail-controls 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 { color: var(--v2-muted); font-size: 10px; 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; border-left: 1px solid var(--v2-border); background: #fff; animation: v2-panel-enter .12s ease-out; } .v2-detail-peek button { display: flex; width: 100%; height: 100%; align-items: center; flex-direction: column; gap: 10px; border: 0; background: #fff; padding: 14px 8px; color: #65758a; cursor: pointer; transition: background .16s, color .16s; } .v2-detail-peek button:hover { background: #f2f7ff; color: var(--v2-blue); } .v2-detail-peek button > svg { flex: 0 0 auto; font-size: 15px; } .v2-detail-peek button > 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-metric-source-link, .v2-live-source-link { display: block; width: 100%; 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:hover, .v2-live-source-link:hover, .v2-detail-source-link:hover, .v2-map-source-link:hover { color: var(--v2-blue); } .v2-detail-source-link { max-width: 100%; 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 { min-width: 0; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgba(23,43,77,.045); } .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 { min-width: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; } .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 > 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 > header > div { min-width: 0; } .v2-source-evidence-card > header strong { display: block; overflow: hidden; color: #2c3b50; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-card > header span { display: block; margin-top: 3px; overflow: hidden; color: #7e8a9c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-source-evidence-card > header aside { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .v2-source-evidence-card > header b { border-radius: 10px; background: #edf2f7; padding: 2px 6px; color: #64748b; font-size: 7px; } .v2-source-evidence-card > header b.is-recommended { background: #e8f1ff; color: #1769d2; } .v2-source-evidence-card > header b.is-disabled, .v2-source-evidence-card > header b.is-offline { background: #eef0f3; color: #7b8491; } .v2-source-evidence-card > header b.is-warning { background: #fff4dc; color: #a46500; } .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 > 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.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 { display: flex; min-height: 48px; align-items: center; gap: 22px; border: 1px solid #dfe6ef; border-radius: 8px; background: #fff; padding: 0 16px; box-shadow: 0 3px 12px rgba(21,32,51,.035); color: #6d7a8d; font-size: 10px; } .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-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: min(560px,100%); 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-route-error footer { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .v2-route-error button, .v2-route-error a { display: inline-flex; height: 36px; align-items: center; gap: 6px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; padding: 0 14px; color: #526176; text-decoration: none; cursor: pointer; font-size: 11px; font-weight: 700; } .v2-route-error button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; } .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,1fr); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }.v2-ops-kpis article { position: relative; min-width: 0; padding: 13px 15px; }.v2-ops-kpis article + article::before { position: absolute; inset: 12px auto 12px 0; width: 1px; background: var(--v2-border); content: ''; }.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-links, .v2-ops-runtime, .v2-ops-sources { border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }.v2-ops-links > header, .v2-ops-runtime > header, .v2-ops-sources > header { display: flex; height: 42px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 13px; }.v2-ops-links header strong, .v2-ops-runtime header strong, .v2-ops-sources header strong { font-size: 11px; }.v2-ops-links header span, .v2-ops-sources header span { color: var(--v2-muted); font-size: 8px; } .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 > 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 { position: relative; border: 1px solid #cbd8e8; border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(31,53,80,.09); overflow: hidden; } .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)); border-bottom: 1px solid #e3eaf2; }.v2-reconcile-kpis article { position: relative; min-width: 0; padding: 13px 16px; }.v2-reconcile-kpis article + article::before { position: absolute; inset: 13px auto 13px 0; width: 1px; background: #e4ebf3; content: ''; }.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-kpis article.is-active strong { color: #2464c8; }.v2-reconcile-kpis article.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 { padding: 12px; background: #fbfcfe; }.v2-reconcile-trend > 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 > 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 > 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 { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(460px,52vw); border-left: 1px solid #c9d7e7; background: #fff; box-shadow: -14px 0 34px rgba(25,48,75,.15); overflow: hidden; }.v2-reconcile-detail > 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 > header div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 8px; }.v2-reconcile-detail > header span { border-radius: 999px; background: #edf2f7; padding: 3px 7px; font-size: 10px; }.v2-reconcile-detail > header span.is-critical { background: #fff0ef; color: #c53c36; }.v2-reconcile-detail > header span.is-major { background: #fff6e5; color: #a96600; }.v2-reconcile-detail > header strong { width: 100%; color: #21364d; font-size: 15px; }.v2-reconcile-detail > header small { color: #738297; font-size: 10px; }.v2-reconcile-detail > 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, .v2-reconcile-review, .v2-reconcile-actions { margin-top: 12px; border: 1px solid #e0e7ef; border-radius: 9px; overflow: hidden; }.v2-reconcile-evidence > header, .v2-reconcile-review > header, .v2-reconcile-actions > 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 { padding-bottom: 11px; }.v2-reconcile-review > header { margin-bottom: 9px; }.v2-reconcile-review > 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 > 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 > button:disabled { cursor: not-allowed; opacity: .5; }.v2-reconcile-review > p { margin: 7px 11px 0; color: #c23c37; font-size: 10px; } .v2-reconcile-actions > 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 > p { margin: 0; padding: 14px; color: #8290a1; font-size: 10px; } .v2-source-diagnostic { position: relative; border: 1px solid #cfdbea; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(31,53,80,.08); overflow: hidden; }.v2-source-diagnostic > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebf3; padding: 9px 14px; background: linear-gradient(100deg,#f8fbff,#f4f8ff); }.v2-source-diagnostic > header div { display: grid; gap: 2px; }.v2-source-diagnostic > header small { color: #547297; font-size: 9px; }.v2-source-diagnostic > header strong { font-size: 15px; }.v2-source-diagnostic > header span { color: var(--v2-muted); font-size: 9px; }.v2-source-diagnostic > header button, .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 > input:last-of-type { 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, .v2-single-map-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-record-card > header { display: flex; height: 40px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 14px; } .v2-record-card > header strong { font-size: 12px; } .v2-record-card > header span, .v2-record-card > header a { color: var(--v2-muted); text-decoration: none; font-size: 9px; } .v2-single-map-card { position: relative; display: flex; min-height: 300px; 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: 38px; align-items: center; justify-content: space-between; gap: 16px; 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-heading { display: flex; align-items: center; gap: 8px; }.v2-profile-heading button { border: 0; border-radius: 5px; background: var(--v2-blue-soft); padding: 4px 7px; color: var(--v2-blue); font-size: 9px; cursor: pointer; }.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-card > header span { display: inline-flex; align-items: center; gap: 5px; } .v2-live-card > header span > i { width: 7px; height: 7px; border-radius: 50%; background: #aab3c0; } .v2-live-card > header span > i.is-online { background: var(--v2-green); box-shadow: 0 0 0 4px rgba(26,160,109,.1); } .v2-live-overview { border-color: #cfddf0; background: linear-gradient(135deg,#fff 0%,#fbfdff 72%,#f3f8ff 100%); } .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-card nav { display: flex; height: 42px; align-items: stretch; border-bottom: 1px solid var(--v2-border); padding: 0 8px; overflow-x: auto; } .v2-telemetry-card nav button { position: relative; min-width: 78px; border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 10px; } .v2-telemetry-card nav button.is-active { color: var(--v2-blue); font-weight: 700; } .v2-telemetry-card nav button.is-active::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px; background: var(--v2-blue); content: ''; } .v2-telemetry-card nav button span { margin-left: 3px; color: #9aa6b7; font-size: 8px; } .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-events-card > header a { color: var(--v2-blue); } .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-track-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 12px; overflow: hidden; padding: 12px 16px 16px; } .v2-track-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(210px, 1.15fr) minmax(170px, .85fr) minmax(170px, .85fr) minmax(140px, .65fr) auto auto; align-items: end; gap: 10px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 11px 13px; box-shadow: var(--v2-shadow); } .v2-track-toolbar label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--v2-muted); font-size: 9px; } .v2-track-toolbar label > div { display: flex; height: 36px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 10px; color: #8996a8; } .v2-track-toolbar input, .v2-track-toolbar select { min-width: 0; height: 36px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 9px; color: #435168; outline: 0; font-size: 10px; } .v2-track-toolbar label > div input { height: auto; flex: 1; border: 0; padding: 0; } .v2-track-toolbar input:focus, .v2-track-toolbar select:focus, .v2-track-toolbar label > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-track-toolbar button:disabled { opacity: .45; cursor: not-allowed; } .v2-track-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(540px, 1fr) 330px; gap: 12px; } .v2-track-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 34px minmax(280px, 1fr) 58px 108px; overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-track-coverage { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px solid var(--v2-border); padding: 0 13px; background: #f8fbff; color: #617086; font-size: 8px; } .v2-track-coverage::before { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--v2-green); content: ''; } .v2-track-coverage.is-limited { background: #fff8ed; color: #8b5b19; } .v2-track-coverage.is-limited::before { background: var(--v2-orange); } .v2-track-coverage.is-empty::before { background: #9aa7b8; } .v2-track-coverage strong { color: inherit; font-size: 9px; white-space: nowrap; } .v2-track-coverage span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-coverage em { margin-left: auto; color: inherit; font-style: normal; white-space: nowrap; } .v2-track-canvas-wrap { position: relative; min-height: 0; overflow: hidden; } .v2-track-map, .v2-track-map-canvas { position: absolute; inset: 0; } .v2-track-loading { position: absolute; z-index: 20; top: 12px; left: 50%; display: flex; height: 32px; align-items: center; gap: 7px; transform: translateX(-50%); border: 1px solid var(--v2-border); border-radius: 7px; background: rgba(255,255,255,.94); padding: 0 12px; color: #637083; box-shadow: var(--v2-shadow); font-size: 9px; } .v2-track-map-legend { position: absolute; right: 14px; bottom: 12px; display: flex; height: 32px; align-items: center; gap: 12px; border: 1px solid rgba(220,228,239,.9); border-radius: 7px; background: rgba(255,255,255,.92); padding: 0 11px; color: #637083; box-shadow: 0 7px 18px rgba(21,32,51,.08); backdrop-filter: blur(8px); font-size: 8px; } .v2-track-map-legend span { display: inline-flex; align-items: center; gap: 5px; } .v2-track-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-blue); } .v2-track-map-legend i.is-start { background: var(--v2-green); } .v2-track-map-legend i.is-end { background: var(--v2-red); } .v2-track-map-legend b { margin-left: 3px; font-weight: 600; } .v2-track-marker { display: grid; width: 24px; height: 24px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--v2-blue); color: #fff; box-shadow: 0 3px 10px rgba(21,32,51,.25); font-size: 8px; font-weight: 800; } .v2-track-marker.is-start { background: var(--v2-green); } .v2-track-marker.is-end { background: var(--v2-red); } .v2-track-marker.is-event { width: 21px; height: 21px; border-width: 2px; } .v2-track-current-marker { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid rgba(18,104,243,.22); border-radius: 50%; background: rgba(18,104,243,.15); box-shadow: 0 0 0 6px rgba(18,104,243,.08); } .v2-track-current-marker span { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--v2-blue); box-shadow: 0 2px 7px rgba(18,104,243,.45); } .v2-track-empty { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; color: #8b98aa; text-align: center; } .v2-track-empty strong { margin-top: 10px; color: #4e5b6f; font-size: 13px; } .v2-track-empty p { margin: 6px 0 0; font-size: 9px; } .v2-track-timeline { display: grid; min-width: 0; grid-template-columns: 142px minmax(0, 1fr); align-items: center; gap: 10px; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); padding: 7px 13px; color: #657286; font-size: 8px; } .v2-track-timeline header { display: flex; flex-direction: column; gap: 3px; } .v2-track-timeline header strong { color: #3f4e64; font-size: 9px; } .v2-track-timeline header span { color: #8793a5; } .v2-track-timeline > div { display: flex; min-width: 0; height: 24px; overflow: hidden; border-radius: 5px; background: #edf2f7; } .v2-track-timeline button { display: flex; min-width: 8px; flex: 1; align-items: center; justify-content: center; gap: 4px; overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.8); background: #dff3e8; padding: 0 4px; color: #26734d; cursor: pointer; } .v2-track-timeline button:hover { filter: brightness(.96); } .v2-track-timeline button.is-stopped { background: #fff0cf; color: #92600d; } .v2-track-timeline button.is-gap { background: #fde4e4; color: #a53b3b; } .v2-track-timeline button i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; } .v2-track-timeline button span { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-timeline > em { grid-column: 2; margin-top: -5px; color: #9a6b20; font-size: 7px; font-style: normal; } .v2-track-timeline.is-empty { display: flex; justify-content: center; color: #8996a8; } .v2-track-playback { display: grid; grid-template-columns: 220px minmax(230px, 1fr) minmax(320px, 1.3fr); align-items: center; min-width: 0; padding: 10px 13px; } .v2-play-controls { min-width: 0; } .v2-play-controls small { display: block; margin-bottom: 6px; color: #64748b; font-size: 9px; } .v2-play-controls p { display: flex; gap: 6px; margin: 0; } .v2-play-controls button, .v2-play-controls select { display: grid; width: 34px; height: 32px; place-items: center; border: 1px solid #dce4ef; border-radius: 6px; background: #fff; color: #536177; cursor: pointer; } .v2-play-controls button:first-child { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; } .v2-play-controls button:disabled { opacity: .35; cursor: not-allowed; } .v2-play-controls select { display: block; width: 55px; padding: 0 7px; font-size: 9px; } .v2-play-progress { min-width: 0; border-left: 1px solid var(--v2-border); padding: 0 18px; } .v2-play-progress header { display: flex; justify-content: space-between; color: #7f8b9d; font-size: 8px; } .v2-play-progress header strong { color: #48566b; font-size: 10px; } .v2-play-progress input { width: 100%; height: 4px; margin: 10px 0 6px; accent-color: var(--v2-blue); cursor: pointer; } .v2-play-progress footer { color: #738095; font-size: 8px; } .v2-current-metrics { display: grid; min-width: 0; grid-template-columns: .7fr .9fr 1.6fr .8fr; margin: 0; border-left: 1px solid var(--v2-border); } .v2-current-metrics > div { min-width: 0; padding: 4px 11px; } .v2-current-metrics > div + div { border-left: 1px solid var(--v2-border); } .v2-current-metrics dt { color: #8290a3; font-size: 8px; } .v2-current-metrics dd { margin: 7px 0 0; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2-current-metrics em { margin-left: 3px; color: #8390a2; font-size: 7px; font-style: normal; font-weight: 500; } .v2-track-inspector { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .v2-track-inspector > section, .v2-track-inspector.is-empty { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-track-inspector > section + section { margin-top: 10px; } .v2-track-inspector section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 13px; } .v2-track-inspector section > header strong { font-size: 11px; } .v2-track-inspector section > header span, .v2-track-inspector section > header b { color: #8491a3; font-size: 8px; font-weight: 500; } .v2-track-vehicle { display: flex; align-items: center; gap: 10px; padding: 13px; } .v2-track-vehicle > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; background: var(--v2-blue-soft); color: var(--v2-blue); } .v2-track-vehicle > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .v2-track-vehicle strong { font-size: 13px; } .v2-track-vehicle small { overflow: hidden; color: #778498; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-summary { margin: 0; padding: 8px 13px; } .v2-track-summary > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); padding: 5px 0; font-size: 9px; } .v2-track-summary dt { color: #8190a4; } .v2-track-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .v2-track-sources > div { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 13px; } .v2-track-sources > div span { display: flex; min-width: 128px; flex: 1; flex-direction: column; gap: 3px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; padding: 7px 8px; } .v2-track-sources > div strong { font-size: 9px; } .v2-track-sources > div small { color: #8390a2; font-size: 7px; } .v2-track-sources > p { margin: 0 13px 10px; border-radius: 5px; background: #fff7ed; padding: 7px 8px; color: #a16207; font-size: 8px; line-height: 1.5; } .v2-track-quality > p { margin: 0 13px 10px; border-radius: 5px; background: #f1f8f4; padding: 7px 8px; color: #3d7356; font-size: 8px; line-height: 1.5; } .v2-track-quality.is-warning > p { background: #fff7ed; color: #9a620e; } .v2-track-events > div { padding: 3px 11px 8px; } .v2-track-events button { display: grid; width: 100%; min-height: 36px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; background: #fff; padding: 3px 0; text-align: left; cursor: pointer; } .v2-track-events button:hover { background: #f8fbff; } .v2-track-events button > i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--v2-blue); color: #fff; font-size: 7px; font-style: normal; font-weight: 800; } .v2-track-events button > i.is-start { background: var(--v2-green); } .v2-track-events button > i.is-end { background: var(--v2-red); } .v2-track-events button > i.is-warning { background: var(--v2-orange); } .v2-track-events button > span { display: flex; min-width: 0; justify-content: space-between; gap: 8px; } .v2-track-events button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-events button small { color: #8491a3; font-size: 8px; } .v2-track-events button em { color: #718096; font-size: 8px; font-style: normal; } .v2-track-inspector.is-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #78869a; text-align: center; } .v2-track-inspector.is-empty strong { color: #4c596d; font-size: 12px; } .v2-track-inspector.is-empty p { max-width: 220px; margin: 7px 0 0; font-size: 9px; line-height: 1.6; } .v2-history-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 16px 16px; } .v2-history-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(230px, 1.1fr) minmax(350px, 1.5fr) 120px 130px auto auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); } .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 { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 7px; overflow-x: auto; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 6px 11px; box-shadow: var(--v2-shadow); } .v2-history-metrics > strong { margin-right: 4px; white-space: nowrap; font-size: 10px; } .v2-history-metrics button { display: inline-flex; height: 27px; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid #dfe6ef; border-radius: 6px; background: #fff; padding: 0 9px; color: #657286; cursor: pointer; font-size: 8px; } .v2-history-metrics button i { width: 6px; height: 6px; border: 1px solid #9aa6b7; border-radius: 50%; } .v2-history-metrics button.is-active { border-color: #b8d1fa; background: var(--v2-blue-soft); color: var(--v2-blue); } .v2-history-metrics button.is-active i { border-color: var(--v2-blue); background: var(--v2-blue); } .v2-history-metrics > span { color: var(--v2-muted); font-size: 8px; } .v2-history-metrics > button.v2-history-metrics-manage { margin-left: auto; 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 { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-summary > div { position: relative; display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 0 16px; } .v2-history-summary > 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 { display: flex; 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-history-trend > header { display: flex; min-height: 37px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; } .v2-history-trend > header strong { font-size: 10px; } .v2-history-trend > header div { display: flex; gap: 14px; color: #657286; font-size: 8px; } .v2-history-trend > header span { display: inline-flex; align-items: center; gap: 5px; } .v2-history-trend > header i { width: 14px; height: 2px; border-radius: 2px; } .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 { position: relative; 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-history-table-card > 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 > header strong { font-size: 10px; } .v2-history-table-card > header div { display: flex; gap: 6px; } .v2-history-table-card > header button, .v2-history-table-card > 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-column-panel { position: absolute; z-index: 15; top: 37px; right: 9px; display: flex; width: min(340px, calc(100% - 18px)); max-height: min(390px, calc(100% - 48px)); flex-direction: column; overflow: hidden; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(30, 47, 70, .18); } .v2-history-column-panel > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8edf4; padding: 10px 11px; }.v2-history-column-panel > header div { display: grid; gap: 3px; }.v2-history-column-panel > header strong { color: #35445a; font-size: 10px; }.v2-history-column-panel > header span { color: #8591a2; font-size: 8px; }.v2-history-column-panel > header button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 5px; background: #f2f5f9; color: #68768a; cursor: pointer; } .v2-history-column-panel > label.v2-history-column-search { display: flex; min-height: 38px; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; border-bottom: 1px solid #e8edf4; padding: 5px 10px; color: #8a97a9; } .v2-history-column-panel > label.v2-history-column-search input { width: 100%; height: 28px; border: 1px solid #dce4ee; border-radius: 6px; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; } .v2-history-column-panel > label.v2-history-column-search input:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); } .v2-history-column-panel > div { display: grid; min-height: 0; overflow: auto; padding: 5px 8px; }.v2-history-column-panel label { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #f0f3f7; padding: 0 4px; color: #4d5b6f; font-size: 9px; cursor: pointer; }.v2-history-column-panel label input { margin: 0; accent-color: var(--v2-blue); }.v2-history-column-panel label small { max-width: 130px; overflow: hidden; color: #929dac; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.v2-history-column-panel > div > p { margin: 18px 8px; color: var(--v2-muted); text-align: center; font-size: 9px; } .v2-history-column-panel > footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; border-top: 1px solid #e8edf4; padding: 8px 10px; }.v2-history-column-panel > footer span { margin-right: auto; color: #8491a3; font-size: 8px; }.v2-history-column-panel > footer button { height: 27px; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; padding: 0 9px; color: #5f6e83; cursor: pointer; font-size: 8px; }.v2-history-column-panel > footer button:disabled { opacity: .4; cursor: not-allowed; } .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 > 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 > footer div { display: flex; gap: 5px; } .v2-history-table-card > footer button, .v2-history-table-card > 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 > footer button:disabled { opacity: .35; } .v2-history-side { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .v2-history-side > section { overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-history-side > section + section { margin-top: 9px; } .v2-history-side section > header { display: flex; height: 38px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); padding: 0 12px; } .v2-history-side section > header strong { font-size: 10px; } .v2-history-side section > header span { color: var(--v2-muted); font-size: 8px; } .v2-history-evidence > header button { border: 0; background: transparent; color: #718096; cursor: pointer; } .v2-history-evidence > dl { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--v2-border); } .v2-history-evidence > 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 > 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 > 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 > 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 > 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 > header button:hover { border-color: #9fc1f5; color: var(--v2-blue); } .v2-access-filter-v3 { display: grid; flex: 0 0 auto; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .7fr)) auto auto; align-items: end; gap: 10px; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; padding: 13px 14px; box-shadow: var(--v2-shadow); } .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-v3 { display: grid; min-height: 56px; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); } .v2-access-kpis-v3 button { position: relative; display: flex; min-width: 0; align-items: center; gap: 12px; border: 0; background: #fff; padding: 10px 18px; text-align: left; cursor: pointer; } .v2-access-kpis-v3 button + button::before { position: absolute; inset: 10px auto 10px 0; width: 1px; background: #e6ebf2; content: ''; } .v2-access-kpis-v3 button:hover { background: #f8fbff; } .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 { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); } .v2-access-table-v3 > 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 > 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 > footer div { display: flex; align-items: center; gap: 7px; }.v2-access-table-v3 > footer button, .v2-access-table-v3 > 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 { min-width: 0; overflow: auto; border: 1px solid var(--v2-border); border-radius: 9px; background: #fff; box-shadow: var(--v2-shadow); } .v2-access-inspector-v3 > header { position: sticky; z-index: 2; top: 0; display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v2-border); background: #fff; padding: 0 14px; }.v2-access-inspector-v3 > header > div { display: grid; gap: 4px; }.v2-access-inspector-v3 > header strong { color: #2f3f55; font-size: 16px; }.v2-access-inspector-v3 > header span { color: #8290a3; font-size: 11px; }.v2-access-inspector-v3 > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; background: #f2f5f8; color: #6d7a8e; cursor: pointer; } .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 > 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 > footer span { color: #8591a2; font-size: 11px; line-height: 1.5; }.v2-access-inspector-v3 > 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 b { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 8px; background: var(--v2-red); color: #fff; font-size: 7px; } .v2-alert-filter { display: grid; flex: 0 0 auto; grid-template-columns: minmax(180px,1.15fr) repeat(4,minmax(92px,.65fr)) repeat(2,minmax(135px,.8fr)) auto auto; align-items: end; gap: 6px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 7px 9px; box-shadow: var(--v2-shadow); } .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 { display: grid; min-height: 62px; flex: 0 0 auto; grid-template-columns: repeat(7,minmax(74px,1fr)); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; margin-top: 8px; box-shadow: var(--v2-shadow); } .v2-alert-kpis button { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; border: 0; background: #fff; cursor: pointer; } .v2-alert-kpis button + button::before { position: absolute; inset: 11px auto 11px 0; width: 1px; background: var(--v2-border); content: ''; } .v2-alert-kpis button:hover, .v2-alert-kpis .is-unprocessed { background: #fff9f2; } .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 { 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-alert-table-card > 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 > header strong { font-size: 9px; }.v2-alert-table-card > header div { display: flex; align-items: center; gap: 7px; }.v2-alert-table-card > header span { color: var(--v2-muted); font-size: 7px; } .v2-alert-table-card > 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 { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }.v2-alert-severity i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }.v2-alert-severity.is-critical { color: var(--v2-red); }.v2-alert-severity.is-critical i { background: var(--v2-red); }.v2-alert-severity.is-major { color: var(--v2-orange); }.v2-alert-severity.is-major i { background: var(--v2-orange); } .v2-alert-status { display: inline-flex; border: 1px solid #dce4ef; border-radius: 4px; background: #f8fafc; padding: 2px 5px; color: #657286; white-space: nowrap; }.v2-alert-status.is-unprocessed { border-color: #fecaca; background: #fff1f2; color: #dc2626; }.v2-alert-status.is-processing { border-color: #bfdbfe; background: #eff6ff; color: var(--v2-blue); }.v2-alert-status.is-recovered { border-color: #bbf7d0; background: #f0fdf4; color: var(--v2-green); } .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 > 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 > footer div { display: flex; gap: 5px; }.v2-alert-table-card > footer button, .v2-alert-table-card > 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 > footer button:disabled { opacity: .35; } .v2-alert-inspector { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); } .v2-alert-inspector > header { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--v2-border); padding: 8px 11px; }.v2-alert-inspector > header > div { display: flex; min-width: 0; flex: 1; justify-content: space-between; flex-direction: column; gap: 6px; }.v2-alert-inspector > header strong { font-size: 12px; }.v2-alert-inspector > header span { display: flex; gap: 5px; font-size: 7px; } .v2-alert-inspector > 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, .v2-alert-notifications > 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, .v2-alert-notifications > header strong { font-size: 11px; }.v2-alert-rule-list > header button, .v2-alert-rule-editor > header button, .v2-alert-notifications > 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, .v2-alert-notifications > header div { display: flex; flex-direction: column; gap: 3px; }.v2-alert-rule-editor > header span, .v2-alert-notifications > 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-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 { 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; } } @media (min-width: 2200px) and (min-height: 1200px) { .v2-monitor-page { gap: 14px; padding: 18px 22px 20px; } .v2-filterbar { 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; padding: 0 20px; font-size: 11px; } } @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 { 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-track-toolbar { grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(140px, .7fr)); } .v2-track-toolbar > button { min-width: 100px; } .v2-track-workspace { grid-template-columns: minmax(500px, 1fr) 290px; } .v2-track-playback { grid-template-columns: 180px minmax(210px, 1fr); } .v2-current-metrics { grid-column: 1 / -1; border-top: 1px solid var(--v2-border); border-left: 0; padding-top: 6px; } .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 { grid-template-columns: 1fr 1fr; } .v2-search-field { grid-column: 1 / -1; } .v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); } .v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(340px, calc(100% - 240px)); 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 button { width: auto; height: 44px; flex-direction: row; gap: 7px; border-radius: 22px; padding: 0 14px; } .v2-detail-peek button > 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-track-page { height: auto; min-height: 100%; overflow: auto; } .v2-track-toolbar { grid-template-columns: 1fr 1fr; } .v2-track-vehicle-input { grid-column: 1 / -1; } .v2-track-workspace { display: flex; flex-direction: column; } .v2-track-main { min-height: 700px; flex: none; grid-template-rows: 34px 420px 58px 145px; } .v2-track-inspector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; } .v2-track-inspector > section + section { margin-top: 0; } .v2-track-events { grid-column: 1 / -1; } .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 > section + section { 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 > 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 { 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 { display: inline-flex; max-width: 150px; height: 26px; align-items: center; gap: 4px; border: 1px solid #c8daf6; border-radius: 5px; background: #eff5ff; padding: 0 6px 0 8px; color: #245da8; cursor: pointer; font-size: 10px; } .v2-mileage-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-mileage-chip svg { flex: 0 0 auto; 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 > button { height: 28px; flex: 0 0 auto; border: 1px solid #efc3c3; border-radius: 6px; background: #fff; padding: 0 10px; color: #ad4141; cursor: pointer; 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-popover { position: absolute; z-index: 45; top: calc(100% + 7px); right: 0; width: 430px; overflow: hidden; border: 1px solid #d8e1ed; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(35,53,78,.18); } .v2-mileage-source-popover > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; padding: 0 14px 0 16px; } .v2-mileage-source-popover > header div { display: flex; flex-direction: column; gap: 3px; } .v2-mileage-source-popover > header strong { color: #263448; font-size: 13px; } .v2-mileage-source-popover > header span, .v2-mileage-source-popover > footer span { color: #8491a3; font-size: 9px; } .v2-mileage-source-popover > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #7d899a; cursor: pointer; } .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-source-popover > footer { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px 0 16px; } .v2-mileage-source-popover > footer button { height: 30px; border: 0; border-radius: 6px; background: var(--v2-blue); padding: 0 13px; color: #fff; cursor: pointer; font-size: 10px; font-weight: 650; } .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 article { min-width: 0; } .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 { position: relative; overflow: hidden; background: #1268f3; padding: 18px 24px 20px; 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 article { position: relative; display: flex; min-width: 0; justify-content: center; flex-direction: column; padding: 17px 20px 18px; } .v2-mileage-summary-secondary article + article::before { position: absolute; inset: 17px auto 17px 0; width: 1px; background: #e0e6ee; content: ""; } .v2-mileage-results { display: flex; min-height: 430px; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #d9e2ed; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(24,39,62,.05); } .v2-mileage-results > header, .v2-mileage-results > 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 > header { border-bottom: 1px solid #e4e9f0; } .v2-mileage-results > header div { display: flex; align-items: baseline; gap: 10px; } .v2-mileage-results > header strong { color: #17253a; font-size: 15px; } .v2-mileage-results > header span, .v2-mileage-results > header em, .v2-mileage-results > footer { color: #7c899b; font-size: 10px; font-style: normal; } .v2-mileage-results > 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 > footer { border-top: 1px solid var(--v2-border); background: #fbfcfe; } .v2-mileage-results > footer div { display: flex; gap: 6px; } .v2-mileage-results > 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 > footer button:hover:not(:disabled) { border-color: #a9bdd7; background: #f5f8fc; color: #315f9f; } .v2-mileage-results > 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 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 9px; box-shadow: 0 4px 16px rgba(21,32,51,.04); } .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 { display: flex; min-width: 0; overflow-x: auto; border-radius: 9px; scroll-snap-type: x proximity; scrollbar-width: none; } .v2-kpis::-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 { min-height: 68dvh; flex: none; } .v2-monitor-table-panel > header { align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 12px; } .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 > article { border: 1px solid #e0e6ee; border-radius: 10px; background: #fff; padding: 12px; box-shadow: 0 2px 8px rgba(21,32,51,.04); content-visibility: auto; contain-intrinsic-size: auto 154px; } .v2-monitor-mobile-cards > article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .v2-monitor-mobile-cards > article > header div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-monitor-mobile-cards > article > header strong { font-size: 15px; }.v2-monitor-mobile-cards > article > header span { color: #7f8da1; font-size: 10px; } .v2-monitor-mobile-cards > article > header > b { color: #1f4f8d; font-size: 18px; font-variant-numeric: tabular-nums; }.v2-monitor-mobile-cards > article > 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-cards > article > 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-mobile-cards > article > footer button { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--v2-blue); font-size: 11px; font-weight: 700; } .v2-monitor-table-panel > 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-layer-control, .v2-map-follow-control { width: 44px; height: 44px; grid-template-columns: 1fr; justify-items: center; padding: 0; } .v2-map-layer-control span:not(.semi-icon), .v2-map-layer-control > i, .v2-map-follow-control span:not(.semi-icon) { display: none; } .v2-map-layer-control .semi-icon, .v2-map-follow-control .semi-icon { display: inline-flex; font-size: 18px; } .v2-province-marker.is-compact { width: 68px; min-height: 42px; 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 { grid-row: auto; grid-column: auto; font-size: 17px; } .v2-province-marker.is-compact > small, .v2-province-marker.is-compact > i { display: none; } .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 button { 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 button { width: auto; height: 44px; flex-direction: row; gap: 7px; border-radius: 22px; padding: 0 14px; background: #fff; } .v2-detail-peek button > span { max-width: 120px; writing-mode: horizontal-tb; font-size: 11px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } .v2-event-strip { flex-wrap: wrap; gap: 7px 12px; padding: 10px 12px; line-height: 1.4; } .v2-event-strip > 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-track-page { padding: 8px; } .v2-track-toolbar { grid-template-columns: 1fr; } .v2-track-vehicle-input { grid-column: auto; } .v2-track-toolbar > button { width: 100%; } .v2-track-main { min-height: 770px; grid-template-rows: auto 400px auto 205px; } .v2-track-map-legend { right: 8px; bottom: 8px; left: 8px; justify-content: center; } .v2-track-map-legend b { display: none; } .v2-track-coverage { min-height: 52px; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; } .v2-track-coverage span { width: calc(100% - 20px); white-space: normal; } .v2-track-coverage em { width: 100%; margin-left: 14px; } .v2-track-timeline { min-height: 74px; grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; } .v2-track-timeline header { flex-direction: row; justify-content: space-between; } .v2-track-timeline > em { grid-column: 1; } .v2-track-playback { display: flex; align-items: stretch; flex-direction: column; gap: 12px; padding: 10px; } .v2-play-controls { display: flex; align-items: center; justify-content: space-between; } .v2-play-controls small { margin: 0; } .v2-play-progress { border: 0; padding: 0; } .v2-track-inspector { display: flex; flex-direction: column; } .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 > div:nth-child(3)::before { display: none; } .v2-history-main { height: 1111px; grid-template-rows: 106px 385px minmax(0, 600px); } .v2-history-trend > header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 7px 10px; } .v2-history-trend > header div { flex-wrap: wrap; gap: 5px 10px; } .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 > header, .v2-alert-table-card > 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-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-ops-kpis article + article::before { display: none; }.v2-ops-kpis article { border-bottom: 1px solid var(--v2-border); } .v2-reconcile-heading { align-items: flex-start; flex-direction: column; }.v2-reconcile-heading button { width: 100%; justify-content: center; }.v2-reconcile-kpis { grid-template-columns: 1fr 1fr; }.v2-reconcile-kpis article + article::before { display: none; }.v2-reconcile-kpis article { border-bottom: 1px solid #e5ebf2; }.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 { border-top: 1px solid #e3eaf2; }.v2-reconcile-detail { 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-diagnostic > header { align-items: flex-start; flex-direction: column; gap: 8px; }.v2-source-diagnostic > header button { width: 100%; }.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-popover { position: fixed; top: 70px; right: 8px; bottom: auto; left: 8px; width: auto; max-height: calc(100dvh - 142px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } .v2-mileage-source-popover > header { position: sticky; z-index: 2; top: 0; background: #fff; } .v2-mileage-source-popover > footer { position: sticky; z-index: 2; bottom: 0; background: #fff; } .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 article { padding: 13px 14px 14px; } .v2-mileage-summary article:nth-child(3)::before { display: none; } .v2-mileage-summary article:nth-child(-n+2) { border-bottom: 1px solid #e5eaf1; } .v2-mileage-summary strong { font-size: 18px; } .v2-mileage-results { min-height: 420px; overflow: visible; } .v2-mileage-results > header { align-items: flex-start; height: auto; flex-direction: column; gap: 4px; padding: 11px 12px; } .v2-mileage-results > header div { align-items: flex-start; flex-direction: column; gap: 3px; } .v2-mileage-results > 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 > footer { min-height: 58px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 9px 10px; } .v2-mileage-results > footer div { width: 100%; } .v2-mileage-results > footer button { height: 34px; } .v2-mileage-results > 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); overflow: hidden; border: 1px solid var(--v2-border); border-radius: 13px; background: #fff; box-shadow: var(--v2-shadow); } .v2-user-list { min-width: 0; border-right: 1px solid var(--v2-border); background: #f9fbfd; 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-list > button { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; padding: 10px; color: #273750; text-align: left; cursor: pointer; } .v2-user-list > button:hover { background: #f0f4f9; } .v2-user-list > button.is-active { background: #eaf2ff; box-shadow: inset 3px 0 var(--v2-blue); } .v2-user-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: #dfe9f8; color: #3a5e91; font-weight: 800; } .v2-user-list button > span:nth-child(2) { min-width: 0; } .v2-user-list button b, .v2-user-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-user-list button b { font-size: 12px; } .v2-user-list button small { margin-top: 4px; color: #8290a3; font-size: 9px; } .v2-user-list button i { border-radius: 10px; background: #f0f2f5; padding: 3px 6px; color: #8a96a6; font-size: 8px; font-style: normal; } .v2-user-list button i.is-enabled { background: #e9f8f2; color: #16805b; } .v2-user-editor { min-width: 0; } .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; overflow: visible; border: 0; box-shadow: none; flex-direction: column; gap: 8px; background: transparent; } .v2-user-list { display: flex; border: 1px solid var(--v2-border); border-radius: 10px; overflow-x: auto; padding: 6px; background: #fff; }.v2-user-list-summary { flex: 0 0 auto; padding: 8px; }.v2-user-list > button { min-width: 210px; } .v2-user-editor { border: 1px solid var(--v2-border); border-radius: 10px; overflow: hidden; 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-password-mobile { display: grid !important; } .v2-topbar-actions .v2-current-user { 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 > 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 > 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-more-backdrop, .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(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-mobile-more-backdrop { position: fixed; z-index: 89; inset: 0 0 calc(65px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; background: rgba(15,23,42,.34); backdrop-filter: blur(2px); } .v2-mobile-more-sheet { width: 100%; border-radius: 18px 18px 0 0; background: #fff; padding: 12px 14px 18px; box-shadow: 0 -22px 60px rgba(15,23,42,.2); animation: v2-mobile-sheet-enter .18s ease-out; } .v2-mobile-more-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; } .v2-mobile-more-sheet > header div { display: flex; flex-direction: column; gap: 3px; } .v2-mobile-more-sheet > header strong { color: #17253a; font-size: 17px; } .v2-mobile-more-sheet > header span { color: #8290a3; font-size: 11px; } .v2-mobile-more-sheet > header button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 23px; } .v2-mobile-more-sheet > nav { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; } .v2-mobile-more-sheet .v2-mobile-nav-item { min-height: 76px; border: 1px solid #e5eaf1; background: #f8fafc; } .v2-main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .v2-mobile-filter-toggle { display: flex; width: 100%; min-height: 54px; flex: 0 0 auto; align-items: center; justify-content: space-between; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; padding: 8px 12px; color: #26364b; box-shadow: 0 3px 12px rgba(25,39,59,.04); text-align: left; } .v2-mobile-filter-toggle > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .v2-mobile-filter-toggle b { font-size: 13px; } .v2-mobile-filter-toggle small { overflow: hidden; color: #7a889b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .v2-mobile-filter-toggle em { flex: 0 0 auto; border-radius: 14px; background: #edf4ff; padding: 5px 10px; color: var(--v2-blue); font-size: 11px; font-style: normal; font-weight: 700; } :is(.v2-alert-filter,.v2-access-filter-v3,.v2-history-toolbar,.v2-mileage-filter).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 { 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:nth-child(3), .v2-kpi:nth-child(4), .v2-kpi:nth-child(5), .v2-kpi:nth-child(7) { 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 > button { width: 100%; border: 1px solid #e0e7f0; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; box-shadow: 0 2px 8px rgba(20,35,55,.04); } .v2-alert-mobile-list > button.is-selected { border-color: #8eb8f8; box-shadow: 0 0 0 2px rgba(18,104,243,.08); } .v2-alert-mobile-list header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2-alert-mobile-list header > strong { font-size: 15px; } .v2-alert-mobile-list header > span { display: flex; gap: 5px; } .v2-alert-mobile-list p { margin: 9px 0; color: #26364b; font-size: 13px; font-weight: 700; } .v2-alert-mobile-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 10px; } .v2-alert-mobile-list dt { color: #8a97a9; font-size: 10px; } .v2-alert-mobile-list dd { margin: 3px 0 0; color: #46566c; font-size: 11px; font-weight: 650; } .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 > 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 > button { width: 100%; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; } .v2-access-mobile-list > button.is-selected { border-color: #8eb8f8; box-shadow: 0 0 0 2px rgba(18,104,243,.08); } .v2-access-mobile-list > button > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .v2-access-mobile-list > button > header > div:first-child { min-width: 0; } .v2-access-mobile-list > button > header > div:first-child strong, .v2-access-mobile-list > button > header > div:first-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-access-mobile-list > button > header > div:first-child strong { font-size: 15px; } .v2-access-mobile-list > button > header > div:first-child span { margin-top: 3px; color: #8491a3; font-size: 10px; } .v2-access-mobile-list > button > p { margin: 9px 0; color: #68768a; font-size: 11px; } .v2-access-mobile-list > button > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; border-top: 1px solid #edf1f5; padding-top: 9px; } .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; overflow-x: auto; flex-wrap: nowrap; } .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 > button { width: 100%; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; padding: 12px; color: #334155; text-align: left; } .v2-history-mobile-list > button.is-selected { border-color: #8eb8f8; } .v2-history-mobile-list header, .v2-history-mobile-list p { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2-history-mobile-list header > div { min-width: 0; } .v2-history-mobile-list header strong, .v2-history-mobile-list header > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-history-mobile-list header strong { font-size: 14px; } .v2-history-mobile-list header > div > span { margin-top: 3px; color: #8794a5; font-size: 10px; } .v2-history-mobile-list p { margin: 9px 0; color: #718096; font-size: 10px; } .v2-history-mobile-list 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-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 9px; } .v2-history-mobile-list dt { color: #8a97a9; font-size: 9px; } .v2-history-mobile-list dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; } .v2-history-mobile-list > button > em { display: block; margin-top: 10px; color: var(--v2-blue); font-size: 11px; font-style: normal; font-weight: 700; text-align: right; } .v2-history-side { margin-top: 10px; } .v2-mileage-query-panel { padding: 8px; } .v2-mileage-query-panel > .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: auto minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; background: #e9eef4; } .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 { flex: 0 0 auto; border-bottom: 1px solid #e2e8f0; padding: 14px 14px 13px; background: #fff; } .v2-track-query > header { display: flex; height: 34px; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; } .v2-track-query > header div { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .v2-track-query > header strong { color: #1e293b; font-size: 14px; letter-spacing: -.02em; } .v2-track-query > header span { color: #8a97a9; font-size: 9px; } .v2-track-query > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dde5ef; border-radius: 7px; background: #fff; color: #66758a; cursor: pointer; } .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-picker { position: relative; display: grid; height: 38px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #d8e1ec; border-radius: 7px; background: #fdfefe; padding: 0 9px; color: #8a97a8; } .v2-track-vehicle-picker:focus-within { border-color: #8cb7fb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); } .v2-track-vehicle-picker input { min-width: 0; height: 34px; border: 0; background: transparent; color: #334155; outline: 0; font-family: inherit; font-size: 11px; } .v2-track-vehicle-picker > button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #8a97a8; cursor: pointer; } .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-date-grid input, .v2-track-query select { width: 100%; height: 35px; box-sizing: border-box; border: 1px solid #dbe3ed; border-radius: 6px; background: #fff; padding: 0 7px; color: #48566a; outline: 0; font-family: inherit; font-size: 8px; } .v2-track-query select { margin-bottom: 9px; font-size: 10px; } .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 { display: flex; min-height: 0; flex: 1; flex-direction: column; } .v2-track-rail-vehicle { display: grid; min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #e8edf3; padding: 8px 13px; } .v2-track-rail-vehicle > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: #eaf2ff; color: #2563eb; } .v2-track-rail-vehicle > div { min-width: 0; }.v2-track-rail-vehicle strong, .v2-track-rail-vehicle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-rail-vehicle strong { color: #253348; font-size: 12px; }.v2-track-rail-vehicle small { margin-top: 3px; color: #8b97a8; font-size: 8px; } .v2-track-rail-vehicle em { color: #2563eb; font-size: 12px; font-style: normal; font-weight: 700; } .v2-track-rail-result > nav { 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-result > nav button { position: relative; border: 0; background: transparent; color: #66758a; font-family: inherit; font-size: 10px; cursor: pointer; } .v2-track-rail-result > nav button.is-active { color: #2563eb; font-weight: 700; }.v2-track-rail-result > nav 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-result > nav b { margin-left: 2px; font-size: 8px; font-weight: 600; } .v2-track-rail-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .v2-track-rail-empty { display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; padding: 24px; color: #9aa6b5; text-align: center; } .v2-track-rail-empty > svg { font-size: 25px; }.v2-track-rail-empty strong { margin-top: 10px; color: #4c596d; font-size: 12px; }.v2-track-rail-empty p { margin: 6px 0 0; color: #8a97a8; font-size: 9px; line-height: 1.55; } .v2-track-stop-list > button, .v2-track-event-list > button { display: grid; width: 100%; min-height: 48px; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; padding: 6px 11px; text-align: left; cursor: pointer; } .v2-track-stop-list > button:hover, .v2-track-event-list > button:hover { background: #f8fbff; }.v2-track-stop-list > button.is-active, .v2-track-event-list > button.is-active { background: #edf5ff; box-shadow: inset 3px 0 #2563eb; } .v2-track-stop-list button > i, .v2-track-event-list button > i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #f3aa3c; color: #fff; font-size: 8px; font-style: normal; font-weight: 800; } .v2-track-event-list button > i { background: #2563eb; }.v2-track-event-list button > i.is-start { background: #18a86b; }.v2-track-event-list button > i.is-end { background: #e74b4b; }.v2-track-event-list button > i.is-warning { background: #f1a238; } .v2-track-stop-list button > span, .v2-track-event-list button > span { min-width: 0; }.v2-track-stop-list button strong, .v2-track-stop-list button small, .v2-track-event-list button strong, .v2-track-event-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-track-stop-list button strong, .v2-track-event-list button strong { color: #3d4b5f; font-size: 9px; }.v2-track-stop-list button small, .v2-track-event-list button small { margin-top: 3px; color: #8c98a9; font-size: 8px; } .v2-track-stop-list button > em, .v2-track-event-list button > em { color: #6f7d90; font-size: 8px; font-style: normal; white-space: nowrap; } .v2-track-list-empty { margin: 50px 20px; color: #8a97a8; font-size: 10px; text-align: center; } .v2-track-overview-panel { padding-bottom: 14px; }.v2-track-overview-panel > section { border-bottom: 1px solid #edf1f5; padding: 11px 13px; }.v2-track-overview-panel section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }.v2-track-overview-panel header strong { color: #364357; font-size: 10px; }.v2-track-overview-panel header span { color: #8a97a8; font-size: 8px; } .v2-track-overview-panel dl { margin: 0; }.v2-track-overview-panel dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); padding: 4px 0; font-size: 8px; }.v2-track-overview-panel dt { color: #8390a2; }.v2-track-overview-panel dd { margin: 0; color: #48566a; text-align: right; font-variant-numeric: tabular-nums; } .v2-track-source-list { display: grid; gap: 5px; }.v2-track-source-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid #e4e9f0; border-radius: 6px; background: #f8fafc; padding: 7px 8px; }.v2-track-source-list strong { color: #425066; font-size: 9px; }.v2-track-source-list span { color: #2563eb; font-size: 8px; }.v2-track-source-list small { grid-column: 1 / -1; margin-top: 3px; color: #8b97a8; font-size: 7px; } .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-quality-card.is-warning { background: #fffaf2; } .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-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 { position: absolute; z-index: 16; top: 60px; left: 14px; width: 292px; overflow: hidden; border: 1px solid rgba(204, 216, 230, .95); border-radius: 9px; background: rgba(28, 39, 55, .91); color: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .2); backdrop-filter: blur(12px); } .v2-track-current-card > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 8px; }.v2-track-current-card header div { min-width: 0; }.v2-track-current-card header strong, .v2-track-current-card header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.v2-track-current-card header strong { font-size: 12px; }.v2-track-current-card header span { margin-top: 3px; color: #b8c4d2; font-size: 8px; }.v2-track-current-card header b { border-radius: 10px; background: rgba(37, 99, 235, .38); padding: 3px 7px; color: #dce9ff; font-size: 8px; } .v2-track-current-card > div { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }.v2-track-current-card > div > span { min-width: 0; padding: 8px 10px; }.v2-track-current-card > div > span + span { border-left: 1px solid rgba(255, 255, 255, .1); }.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: #9eacbd; font-size: 7px; }.v2-track-current-card > div strong { margin-top: 4px; font-size: 10px; }.v2-track-current-card em { color: #aebac8; font-size: 7px; font-style: normal; font-weight: 500; } .v2-track-current-card > p { margin: 0; overflow: hidden; padding: 8px 11px; color: #c4ced9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .v2-track-empty-state { position: absolute; z-index: 14; top: 50%; left: 50%; display: flex; width: min(330px, calc(100% - 36px)); align-items: center; flex-direction: column; transform: translate(-50%, calc(-50% - 56px)); border: 1px solid rgba(211, 221, 232, .95); border-radius: 12px; background: rgba(255, 255, 255, .93); padding: 24px; color: #8a97a8; box-shadow: 0 14px 36px rgba(27, 42, 61, .1); text-align: center; backdrop-filter: blur(10px); }.v2-track-empty-state > 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 { position: absolute; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; min-height: 112px; grid-template-columns: 145px minmax(260px, 1fr) auto; align-items: center; gap: 18px; border-top: 1px solid rgba(202, 214, 228, .95); background: rgba(255, 255, 255, .96); padding: 12px 16px; box-shadow: 0 -8px 26px rgba(24, 38, 58, .11); backdrop-filter: blur(14px); } .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 button { min-width: 2px; border: 0; border-right: 1px solid rgba(255, 255, 255, .55); background: #b9e6d0; padding: 0; cursor: pointer; }.v2-track-segment-rail button.is-stopped { background: #f8d797; }.v2-track-segment-rail button.is-gap { background: #f2a7a7; }.v2-track-segment-rail button:hover { filter: brightness(.94); }.v2-track-segment-placeholder { height: 10px; border-radius: 5px; background: #e7ecf2; } .v2-track-dock-progress > input { width: 100%; height: 4px; margin: 13px 0 7px; accent-color: #2563eb; cursor: pointer; }.v2-track-dock-progress > input:disabled { cursor: not-allowed; }.v2-track-dock-progress > div { 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 { 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 { 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 { height: 30px; margin-bottom: 7px; }.v2-track-query > header strong { font-size: 14px; }.v2-track-query > header button { width: 34px; height: 34px; transform: rotate(-90deg); } .v2-track-vehicle-picker { height: 42px; }.v2-track-vehicle-picker input, .v2-track-date-grid input, .v2-track-query select { font-size: 16px; }.v2-track-date-grid { grid-template-columns: 1fr; gap: 6px; }.v2-track-date-grid input, .v2-track-query select { height: 40px; }.v2-track-query select { margin-bottom: 7px; }.v2-track-presets { margin: 6px 0; }.v2-track-presets button { height: 29px; }.v2-track-query-button { height: 42px; font-size: 12px; } .v2-track-rail-vehicle { min-height: 54px; }.v2-track-rail-result > nav { height: 42px; flex-basis: 42px; }.v2-track-stop-list > button, .v2-track-event-list > button { min-height: 54px; }.v2-track-stop-list button strong, .v2-track-event-list button strong { font-size: 11px; }.v2-track-stop-list button small, .v2-track-event-list button small { font-size: 9px; } .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 button > span:not(.semi-icon) { display: none; }.v2-track-stage-tools button > .semi-icon { display: inline-flex; font-size: 17px; } .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 { top: auto; right: 8px; bottom: 126px; left: 8px; width: auto; border-radius: 9px; }.v2-track-current-card > header { padding: 8px 10px 6px; }.v2-track-current-card > div > span { padding: 6px 9px; }.v2-track-current-card > p { display: none; } .v2-track-empty-state { width: min(300px, calc(100% - 28px)); transform: translate(-50%, calc(-50% - 42px)); padding: 20px 16px; } .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 { min-height: 118px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 9px; }.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-dock-progress > div 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 { height: 38px; margin-bottom: 12px; } .v2-track-query > header strong { font-size: 16px; } .v2-track-query > header span, .v2-track-query > label, .v2-track-date-grid label { font-size: 11px; } .v2-track-vehicle-picker { height: 42px; } .v2-track-vehicle-picker input { height: 38px; font-size: 13px; } .v2-track-date-grid input, .v2-track-query select { height: 39px; font-size: 12px; } .v2-track-presets button { height: 30px; font-size: 11px; } .v2-track-query-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-stop-list > button, .v2-track-event-list > button { min-height: 56px; } .v2-track-overview-panel dl div { min-height: 30px; align-items: center; font-size: 11px; } .v2-track-stage-tools 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 header strong { font-size: 14px; } .v2-track-current-card > div strong { font-size: 12px; } .v2-track-current-card > p { font-size: 10px; } .v2-track-dock-summary strong { font-size: 18px; } .v2-track-dock-summary span, .v2-track-dock-progress > div, .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 > header { min-height: 48px; padding: 0 14px; } .v2-history-table-card > 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 > 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 > header strong { font-size: 14px; } .v2-mileage-results > header span, .v2-mileage-results > header em, .v2-mileage-results > 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 { min-height: 76px; margin-top: 0; } .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 > header { min-height: 44px; padding: 0 12px; } .v2-alert-table-card > header strong { font-size: 14px; } .v2-alert-table-card > header span { font-size: 11px; } .v2-alert-table-card > 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 > footer { min-height: 42px; font-size: 11px; } .v2-alert-table-card > footer button, .v2-alert-table-card > footer select { height: 30px; font-size: 11px; } .v2-alert-inspector > 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, .v2-alert-notifications > 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; } /* 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-v3 { min-height: 76px; } .v2-access-kpis-v3 small { font-size: 11px; } .v2-access-kpis-v3 strong { font-size: 20px; } .v2-access-table-v3 > 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 > footer { min-height: 44px; font-size: 11px; } .v2-access-inspector-v3 > header strong { font-size: 15px; } .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-access-filter-v3,.v2-history-toolbar,.v2-mileage-filter).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 > .v2-mobile-filter-toggle { min-height: 48px; margin: 0 0 7px; padding: 7px 10px; } .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; padding: 11px 14px 12px; } .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 article { min-height: 70px; justify-content: flex-start; border-bottom: 0 !important; padding: 9px 9px 8px; } .v2-mileage-summary-secondary article + article::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 > header { gap: 5px; padding: 9px 10px; } .v2-mileage-results > header div:first-child { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; } .v2-mileage-results > header strong { font-size: 14px; } .v2-mileage-results > header .v2-mileage-result-actions { gap: 6px; } .v2-mileage-results > 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 > header strong { font-size: 11px; } .v2-source-evidence-card dd { font-size: 10px; } }