:root {
--ponto-radius: 12px;
--ponto-control-radius: 8px;
--ponto-focus: var(--blue, #2563eb);
}
html[data-ponto-theme="signal"] {
color-scheme: light;
--canvas: #f4f6f8;
--backdrop: #f4f6f8;
--bg: #f4f6f8;
--surface: #ffffff;
--surface-soft: #f8fafc;
--soft: #f0f3f7;
--panel: #ffffff;
--ink: #172334;
--text: #172334;
--ink-soft: #33465d;
--navy: #172334;
--muted: #56677c;
--line: #dce3eb;
--line-strong: #b9c5d3;
--soft-line: #e5eaf0;
--accent: #c04712;
--accent-deep: #9d350b;
--accent-soft: #fff1e8;
--orange: #c04712;
--orange-dark: #9d350b;
--orange-soft: #fff1e8;
--ponto-price: #a63e10;
--ponto-price-soft: #fff4ec;
--ponto-price-line: #edc9b4;
--blue: #245fc7;
--blue-soft: #edf3ff;
--teal: #08745f;
--teal-soft: #eaf7f2;
--good: #087443;
--green: #087443;
--green-soft: #eaf7ef;
--danger: #b12b37;
--red: #b12b37;
--shadow: 0 8px 28px rgba(25, 42, 65, .07);
--ponto-selected-border: #168164;
--ponto-selected-fill: #edf8f3;
}
html[data-ponto-theme="signal"] body {
color: var(--ink);
background: var(--canvas) !important;
}
html[data-ponto-theme="signal"] body::before { background: none; opacity: 0; }
html[data-ponto-theme="signal"] :is(h1,h2,h3,h4,h5,h6) { color: var(--ink); }
html[data-ponto-theme="signal"] :is(.top,.workspace-header,.app-header,.coding-header,.topbar) {
color: var(--ink);
background: var(--surface) !important;
border: 1px solid var(--line);
border-radius: var(--ponto-radius);
box-shadow: 0 2px 12px rgba(25,42,65,.04);
}
html[data-ponto-theme="signal"] :is(
.card,.dashboard-card,.request-panel,.catalogue-panel,.form-section,.orders-workspace,
.service-detail,.service-information-panel,.service-request-fields,.service-checkout-panel,
.request-panel-wide,.order-detail,.order-list,.order-card,.order-workbench,.order-workbench-panel,
.summary-block,.customer-card,.customer-editor,.platform-settings-card,.quick-catalogue-card,
.global-module-card,.customer-settings,.workspace-dialog-card,.admin-order-detail,
.admin-queue-panel,.service-work-section,.review-panel,.submit-panel,.admin-file-hero,
.customer-active-orders,.coding-order-workspace,.order-summary-panel,.account-panel
) {
color: var(--ink);
background: var(--surface);
border-color: var(--line);
box-shadow: none;
}
html[data-ponto-theme="signal"] :is(
.stat,.detail-stat,.profile-stat,.owner-queue-metric,.summary-stat,.vehicle-spec,
.request-step,.detection-banner,.selected-service-context,.catalogue-note,
.order-request-summary,.order-list-head,.operation-table-head,.admin-order-list,
.settings-grid fieldset,.file-tool-row,.security-grid article,.customer-active-order-row,
.coding-order-tools,.risk-confirmation,.checkout-total,.checkout-service,.order-filter
) { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
html[data-ponto-theme="signal"] :is(.muted,.form-help,.field-help,.selection-hint,.panel-heading p,.service-detail p,.coding-intro p) { color: var(--muted); }
html[data-ponto-theme="signal"] :is(input,select,textarea) {
color: var(--ink) !important;
border: 1px solid var(--line-strong);
background: var(--surface) !important;
border-radius: var(--ponto-control-radius);
box-shadow: none;
}
html[data-ponto-theme="signal"] :is(input,textarea)::placeholder { color: #66768a; opacity: 1; }
html[data-ponto-theme="signal"] :is(input,select,textarea):focus-visible {
border-color: var(--blue);
outline: 3px solid #245fc729;
outline-offset: 1px;
}
html[data-ponto-theme="signal"] :is(input,select,textarea):disabled { color: var(--muted) !important; background: var(--soft) !important; }
html[data-ponto-theme="signal"] :is(.button,button,.nav-link) { border-radius: var(--ponto-control-radius); }
html[data-ponto-theme="signal"] :is(.button.primary,.button-primary,.primary-action,button.primary,.submit-button) {
color: #fff !important;
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: 0 2px 4px #9d350b18;
}
html[data-ponto-theme="signal"] :is(.button.primary,.button-primary,.primary-action,button.primary,.submit-button):hover {
background: var(--accent-deep) !important;
border-color: var(--accent-deep) !important;
}
html[data-ponto-theme="signal"] :is(.button:not(.primary),.top a,.nav-link,.admin-nav-link,.admin-subnav button) {
color: var(--ink-soft);
background: var(--surface);
border-color: var(--line-strong);
}
html[data-ponto-theme="signal"] .button.button-danger {
color: var(--danger); background: #fff0f1; border-color: #d98d96;
}
html[data-ponto-theme="signal"] .button.button-danger:hover { background: #ffe0e4; border-color: var(--danger); }
html[data-ponto-theme="signal"] .portal-body .module-area :is(.files-module,.coding-module) .module-card > strong {
background: var(--module-accent); color: #fff; box-shadow: none;
}
html[data-ponto-theme="signal"] .vehicle-info-new { color: #fff; background: var(--green); font-size: 11px; }
html[data-ponto-theme="signal"] :is(
.vehicle-configuration-delivery,.vehicle-configuration-primary > article,
.vehicle-configuration-detection > article,.vehicle-configuration-health article,
.vehicle-configuration-capabilities article,.vehicle-configuration-module,
.vehicle-configuration-download-card,.vehicle-configuration-card-action,
.vehicle-configuration-actions,.vehicle-configuration-history,.vehicle-configuration-history li,
.ncd-generation-workspace,.ncd-generation-row,.ncd-additional-generation,
.map-activation-delivery,.map-activation-card
) { color: var(--ink); background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
html[data-ponto-theme="signal"] :is(
.vehicle-configuration-delivery,.ncd-generation-workspace,.ncd-additional-generation,.map-activation-delivery
) :is(strong,dd,li,p) { color: var(--ink); }
html[data-ponto-theme="signal"] :is(
.vehicle-configuration-delivery,.ncd-generation-workspace,.ncd-additional-generation,.map-activation-delivery
) :is(small,dt) { color: var(--muted); }
html[data-ponto-theme="signal"] :is(
.vehicle-configuration-health,.vehicle-configuration-capabilities,.vehicle-configuration-actions,
.vehicle-configuration-history,.vehicle-configuration-detection,.vehicle-configuration-download-card,
.vehicle-configuration-card-action,.ncd-generation-row,.ncd-additional-generation-head
) span { color: var(--muted); }
html[data-ponto-theme="signal"] .vehicle-factory-options li { color: var(--ink-soft); }
html[data-ponto-theme="signal"] .vehicle-configuration-module[open] summary { background: var(--surface-soft); border-color: var(--line); }
html[data-ponto-theme="signal"] .vehicle-configuration-module summary > b { color: var(--ink-soft); border-color: var(--line-strong); }
html[data-ponto-theme="signal"] .vehicle-configuration-module summary strong { color: var(--blue); }
html[data-ponto-theme="signal"] .vehicle-configuration-capability { background: var(--surface-soft); border-color: var(--line-strong); }
html[data-ponto-theme="signal"] .vehicle-configuration-capability > span { color: var(--muted); }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-capability.is-supported,.vehicle-configuration-capability.is-supported-after-flash,.ncd-vin-lock) { background: var(--green-soft); border-color: #a7d4b8; }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-capability.is-supported,.vehicle-configuration-capability.is-supported-after-flash,.vehicle-configuration-health .is-fresh,.vehicle-configuration-health .is-confirmed,.ncd-vin-lock) strong { color: var(--green); }
html[data-ponto-theme="signal"] .vehicle-configuration-capability.is-not-supported { background: #fff0f1; border-color: #e9b2b8; }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-capability.is-not-supported,.vehicle-configuration-health .is-stale,.vehicle-configuration-health .is-manual) strong { color: var(--danger); }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-capability.is-unknown,.vehicle-configuration-health .is-aging,.vehicle-configuration-health .is-inferred) strong { color: #79570c; }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-source-warning,.vehicle-configuration-issues) { background: #fff6dd; border-color: #e6cd82; }
html[data-ponto-theme="signal"] :is(.vehicle-configuration-source-warning,.vehicle-configuration-issues) :is(strong,span,b) { color: #79570c; }
html[data-ponto-theme="signal"] .vehicle-configuration-issues li { background: #fffaf0; }
html[data-ponto-theme="signal"] .vehicle-configuration-issues.is-clear { background: var(--green-soft); border-color: #a7d4b8; }
html[data-ponto-theme="signal"] .vehicle-configuration-issues.is-clear :is(strong,span) { color: var(--green); }
html[data-ponto-theme="signal"] .vehicle-configuration-isteps small { background: var(--surface-soft); border-color: var(--line); color: var(--ink-soft); }
html[data-ponto-theme="signal"] .vehicle-configuration-isteps b { color: var(--muted); }
html[data-ponto-theme="signal"] .vehicle-configuration-history del { color: var(--danger); }
html[data-ponto-theme="signal"] .vehicle-configuration-history ins { color: var(--green); }
html[data-ponto-theme="signal"] .ncd-additional-generation-head > strong { color: #633aa0; background: #f4eefe; border-color: #c7b4e3; }
html[data-ponto-theme="signal"] :is(.ncd-purchase-confirmation,.ncd-generation-locked) { color: var(--ink-soft); background: var(--surface-soft); border-color: var(--line-strong); }
html[data-ponto-theme="signal"] :is(.ncd-vin-lock span,.ncd-vin-lock small,.ncd-additional-generation-submit span,.map-activation-card span) { color: var(--muted); }
html[data-ponto-theme="signal"] .ncd-additional-generation-submit { border-color: var(--line); }
html[data-ponto-theme="signal"] :is(.nav-link.active,.admin-nav-link.active,.admin-subnav button.active,[role="tab"][aria-selected="true"]) {
color: var(--accent-deep);
background: var(--accent-soft);
border-color: var(--accent);
}
html[data-ponto-theme="signal"] :is(.service-item.active,.service-choice-card.selected,.choice-card.selected,.ecu-choice.selected) {
border-color: var(--ponto-selected-border);
background: var(--ponto-selected-fill);
color: var(--ink);
box-shadow: 0 0 0 1px var(--ponto-selected-border);
}
html[data-ponto-theme="signal"] :is(.service-choice-price,.checkout-total > strong,.summary-total > strong,.operation-table-total,.coding-order-total) {
color: var(--ponto-price) !important;
}
html[data-ponto-theme="signal"] :is(.notice.good,.notice.success,.status-pill.completed,.status-pill.ready,.status-pill.good) {
background: var(--green-soft); border-color: #a7d4b8; color: #086438;
}
html[data-ponto-theme="signal"] :is(.notice.error,.notice.danger,.status-pill.failed) {
background: #fff0f1; border-color: #e9b2b8; color: #a42632;
}
html[data-ponto-theme="signal"] :is(.notice.warning,.checkout-balance-warning,.status-pill.waiting) {
background: #fff6dd; border-color: #e6cd82; color: #79570c;
}
html[data-ponto-theme="signal"] :is(.workspace-dialog,.chat-image-viewer) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ponto-theme="signal"] :is(.workspace-dialog,.chat-image-viewer)::backdrop { background: #17233466; backdrop-filter: blur(3px); }
html[data-ponto-theme="signal"] :is(.notification-panel,.notification-item) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ponto-theme="signal"] .notification-item:hover { background: var(--soft); }
html[data-ponto-theme="signal"] .notification-item.unread { background: var(--blue-soft); }
html[data-ponto-theme="signal"] .notification-phone-status { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
html[data-ponto-theme="signal"] .chat-attachment-picker { color: var(--ink); background: var(--surface-soft); border-color: var(--line-strong); }
html[data-ponto-theme="signal"] .chat-attachment-picker strong { color: var(--ink); }
html[data-ponto-theme="signal"] .support-chat {
--chat-bg: #f4f6f8; --chat-panel: #ffffff; --chat-panel-soft: #f0f3f7;
--chat-text: #172334; --chat-muted: #56677c; --chat-border: #dce3eb;
--chat-border-strong: #b9c5d3; --chat-accent: #c04712; --chat-accent-dark: #9d350b;
--chat-peer: #edf3ff; --chat-own: #fff1e8; --chat-shadow: 0 16px 48px #17233424;
}
html[data-ponto-theme="signal"] .appearance-swatch--signal i:nth-child(1) { background: #f4f6f8; }
html[data-ponto-theme="signal"] .appearance-swatch--signal i:nth-child(2) { background: #c04712; }
html[data-ponto-theme="signal"] .appearance-swatch--signal i:nth-child(3) { background: #ffffff; }
html[data-ponto-theme] :is(.support-chat-customers,.support-chat-conversation,.support-chat-form) { min-width: 0; }
.support-chat-messages { overflow-anchor: none; position: relative; }
.support-chat-message { flex-shrink: 0; }
.support-chat-history-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 4px 12px; background: var(--chat-panel); }
.support-chat-history-actions:has(> .support-chat-hidden:first-child):has(> .support-chat-hidden:last-child) { display: none; }
.support-chat-history-actions button { min-height: 34px; border: 1px solid var(--chat-border); border-radius: 6px; color: var(--chat-text); background: var(--chat-panel-soft); padding: 5px 9px; font-size: 12px !important; }
.support-chat-message-meta time,.support-chat-online { font-size: 12px; }
.support-chat-message-meta strong { font-size: 13px; }
.support-chat-send { color: #17100d; background: #ff8b4e; border-color: #ff8b4e; }
html[data-ponto-theme="signal"] .support-chat-send { color: #fff; background: var(--chat-accent); border-color: var(--chat-accent); }
.notification-history-controls { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.notification-history-controls button,.notification-history-more { min-height: 38px; padding: 7px 12px; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; }
.notification-history-controls button[aria-pressed="true"] { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); }
.notification-history-more { margin: 8px 12px; flex-shrink: 0; }
.notification-trigger.has-unread { animation: none; }
.notification-item.state-cancelled .notification-state-icon,.notification-attention.is-cancelled .notification-attention-icon { background: var(--soft); border-color: var(--line-strong); color: var(--muted); }
.notification-attention { animation: none; }
html[data-ponto-theme] .operation-table-row strong { font-size: 14px; }
html[data-ponto-theme] .field-optional { font-size: 12px !important; }
html[data-ponto-theme] :is(.module-info-trigger,.notification-trigger,.support-chat-close,.icon-button) { min-width: 44px; min-height: 44px; }
html[data-ponto-theme] .module-info-trigger { width: 44px; height: 44px; }
html[data-ponto-theme] .owner-queue.is-empty { padding: 16px 20px; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-metrics { display: none; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-empty { padding: 0; min-height: 0; border: 0; background: transparent; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-empty span { display: none; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-head { margin-bottom: 8px; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-head p { display: none; }
html[data-ponto-theme] .portal-body .workspace-header { padding: 14px 20px; gap: 16px; }
html[data-ponto-theme] .portal-body .workspace-header .ponto-logo-orbit { width: 104px; height: 54px; }
html[data-ponto-theme] .portal-body .workspace-header .top-actions { gap: 8px; }
html[data-ponto-theme] .portal-body .workspace-header .brand { min-width: 0; gap: 12px; }
html[data-ponto-theme] .portal-body .workspace-header .brand strong { font-size: 20px !important; }
:is(button,a,input,textarea,select):focus-visible { outline: 3px solid color-mix(in srgb, var(--ponto-focus) 55%, transparent); outline-offset: 2px; }
@media (max-width: 760px) {
html[data-ponto-theme] :is(input,select,textarea) { font-size: 16px !important; }
html[data-ponto-theme] .portal-body .workspace-header { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 12px; gap: 10px; }
html[data-ponto-theme] .portal-body .workspace-header .brand { flex: 1 1 auto; }
html[data-ponto-theme] .portal-body .workspace-header .brand { flex-direction: row; align-items: center; }
html[data-ponto-theme] .portal-body .workspace-header .ponto-logo-orbit { width: 74px; height: 40px; }
html[data-ponto-theme] .portal-body .workspace-header .ponto-logo-orbit img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none; }
html[data-ponto-theme] .portal-body .workspace-header .brand strong { font-size: 18px !important; }
html[data-ponto-theme] .portal-body .workspace-header .top-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; }
html[data-ponto-theme] .portal-body .workspace-header .top-actions > * { width: auto; flex: 0 1 auto; }
html[data-ponto-theme] .portal-body .workspace-header .header-greeting { margin-left: auto; width: 44px; min-width: 44px; height: 44px; padding: 4px; }
html[data-ponto-theme] .portal-body .workspace-header :is(.header-user-copy,.header-user-chevron) { display: none; }
html[data-ponto-theme] .portal-body .workspace-header .admin-workspace-link { padding: 8px 10px; min-height: 42px; }
html[data-ponto-theme] .owner-queue.is-empty { padding: 12px 14px; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-head { display: flex; align-items: center; gap: 8px; }
html[data-ponto-theme] .owner-queue.is-empty h2 { font-size: 18px; }
html[data-ponto-theme] .owner-queue.is-empty .eyebrow { display: none; }
html[data-ponto-theme] .owner-queue.is-empty .owner-queue-empty strong { font-size: 13px; font-weight: 500; color: var(--muted); }
html[data-ponto-theme] .owner-queue-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px; }
html[data-ponto-theme] .owner-queue-row-main { grid-column: 1 / -1; grid-template-columns: auto minmax(0,1fr); gap: 5px 8px; }
html[data-ponto-theme] .owner-queue-row-main > i { justify-self: start; }
html[data-ponto-theme] .owner-queue-row-main > strong { grid-column: 1 / -1; white-space: normal; font-size: 15px; }
html[data-ponto-theme] .owner-queue-customer-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html[data-ponto-theme] .owner-queue-age { padding: 0; border: 0; }
html[data-ponto-theme] .owner-queue-row-action { display: none; }
html[data-ponto-theme] .admin-summary .overview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
html[data-ponto-theme] .admin-summary .stat { min-height: 0; padding: 12px; }
.support-chat-conversation-head { min-height: 54px; padding: 8px 12px; }
.support-chat-message-meta { flex-wrap: wrap; gap: 4px 8px; }
.support-chat-header { flex-shrink: 0; }
.support-chat-form { flex-shrink: 0; padding: 8px 12px; }
html[data-ponto-theme] .support-chat-send { min-height: 44px !important; }
html[data-ponto-theme] .support-chat-form .chat-attachment-picker { min-height: 44px !important; }
html[data-ponto-theme] .request-draft-status { flex-direction: row; align-items: center; gap: 8px; padding: 8px; }
html[data-ponto-theme] .request-draft-status .button { width: auto; min-height: 38px; padding: 7px 9px; }
html[data-ponto-theme] .vehicle-information-mode .request-toolbar { display: none; }
html[data-ponto-theme] .report-total { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
html[data-ponto-theme] .report-total > small { grid-column: 1 / -1; }
html[data-ponto-theme] .report-checkout .button { min-height: 44px !important; }
html[data-ponto-theme] body.coding-body .coding-header { padding: 12px !important; gap: 10px; }
html[data-ponto-theme] body.coding-body .coding-brand { gap: 10px; min-width: 0; }
html[data-ponto-theme] body.coding-body .coding-brand strong { font-size: 20px !important; }
html[data-ponto-theme] body.coding-body .coding-brand .ponto-logo-orbit { flex: 0 0 90px; width: 90px; height: 50px; }
html[data-ponto-theme] body.coding-body .coding-brand .ponto-logo-orbit img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none; }
html[data-ponto-theme] body.coding-body #codingServiceDeskStatus { display: none; }
html[data-ponto-theme] body.coding-body .coding-header-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-ponto-theme] body.coding-body .coding-header .header-user-menu-trigger { width: 44px; min-width: 44px; height: 44px; padding: 4px; }
html[data-ponto-theme] body.coding-body .coding-header :is(.header-user-copy,.header-user-chevron) { display: none; }
html[data-ponto-theme="signal"] body.coding-body .coding-header .balance-pill { display: flex; gap: 6px; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); }
html[data-ponto-theme="signal"] body.coding-body .coding-header .balance-pill strong { color: var(--ponto-price); }
html[data-ponto-theme] body.file-service-body .app-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; overflow: visible; min-height: 44px; padding: 3px; }
html[data-ponto-theme] body.file-service-body .app-nav .nav-link { min-width: 0; min-height: 44px; padding: 6px 3px; font-size: 13px !important; white-space: normal; }
html[data-ponto-theme] body.file-service-body #requestView > .view-heading { min-height: 0; padding: 14px; margin-bottom: 12px; }
html[data-ponto-theme] body.file-service-body #requestView > .view-heading h1 { margin: 0; font-size: 24px !important; }
html[data-ponto-theme] body.file-service-body #requestView > .view-heading > button { display: none; }
html[data-ponto-theme] body.file-service-body #requestView .request-panel { padding: 0; border: 0; background: transparent; }
html[data-ponto-theme] body.file-service-body .request-form-step { padding: 16px; }
html[data-ponto-theme] body.file-service-body .request-step-heading { flex-direction: row; align-items: flex-start; }
html[data-ponto-theme] body.file-service-body .request-step-heading > div { flex: 1 1 220px; }
.notification-panel-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.notification-trigger,.notification-attention,.module-card,.button { animation: none !important; transition: none !important; }
}