/* ================================================================
OCPP Broker Portal — Momentum lightBronzeWebex
Uses shared tokens from /static/css/untitled-ui-tokens.css
================================================================ */
/* === Reset === */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background: var(--color-bg-gradient, var(--color-bg-secondary));
background-attachment: fixed;
color: var(--color-text-primary);
min-height: 100vh;
font-size: var(--text-sm);
line-height: var(--leading-sm);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ================================================================
HEADER
================================================================ */
#app-header {
background: var(--color-bg-glass, rgba(255,255,255,0.82));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
color: var(--color-text-primary);
padding: 0 var(--spacing-3xl);
height: 56px;
display: flex;
align-items: center;
box-shadow: none;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--color-border-secondary, rgba(0,0,0,0.08));
}
#app-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #c49a6c, var(--brand-500) 50%, #c49a6c);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.header-left {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.header-icon {
width: 22px;
height: 22px;
color: var(--color-text-primary);
}
#app-header h1 {
font-family: var(--font-family-serif, var(--font-family));
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
letter-spacing: -0.02em;
color: var(--color-text-primary);
}
.header-right {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
#app-header nav {
display: flex;
gap: var(--spacing-xs);
}
.nav-link {
color: var(--color-text-secondary);
text-decoration: none;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
transition: all 0.15s ease;
}
.nav-link:hover {
color: var(--color-text-primary);
background: var(--color-bg-active, rgba(0,0,0,0.04));
}
.nav-link.active {
color: var(--color-text-primary);
background: var(--color-bg-active, rgba(0,0,0,0.06));
font-weight: var(--font-weight-semibold);
}
/* === Preferences Dropdown === */
.prefs-dropdown {
position: relative;
flex-shrink: 0;
}
.prefs-toggle {
display: flex;
align-items: center;
gap: 4px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--color-border-secondary, rgba(0,0,0,0.08));
border-radius: var(--radius-md);
background: transparent;
cursor: pointer;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: 600;
transition: all 0.15s ease;
}
.prefs-toggle:hover {
background: var(--color-bg-active, rgba(0,0,0,0.04));
color: var(--color-text-primary);
}
/* Die eigentlichen .prefs-menu / .prefs-* Regeln leben in
shared-ui/app-switcher/pipelet-header.css — dort werden sie für
alle Pipelet-Apps zentral definiert und laden NACH style.css, also
hatten Duplikate hier keine Wirkung. Bei Bedarf dort anfassen. */
.prefs-menu.open { display: block; }
.prefs-section { padding: 2px 0; }
.prefs-section-label {
padding: 4px 14px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-tertiary);
}
.prefs-divider {
height: 1px;
background: var(--color-border);
margin: 4px 0;
}
.prefs-item {
display: flex;
align-items: center;
width: 100%;
padding: 7px 14px;
border: none;
background: none;
cursor: pointer;
font-size: var(--text-sm);
color: var(--color-text-quaternary);
text-align: left;
transition: background 0.1s, color 0.1s;
}
.prefs-item:hover {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.prefs-item.active {
color: var(--color-text-primary);
font-weight: 600;
}
.prefs-item.active::after {
content: '\2713';
margin-left: auto;
font-size: 0.85em;
color: var(--brand-500, #1170cf);
}
/* ================================================================
MAIN CONTENT
================================================================ */
#app-content {
max-width: 1280px;
margin: 0 auto;
padding: var(--spacing-3xl);
}
/* ================================================================
BUTTONS
================================================================ */
.btn {
padding: var(--spacing-md) var(--spacing-xl);
border: 1px solid transparent;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
cursor: pointer;
font-family: var(--font-family);
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
line-height: var(--leading-sm);
}
.btn:focus-visible {
box-shadow: var(--ring-brand);
}
.btn-primary {
background: var(--button-primary-bg);
color: var(--button-primary-fg);
border-color: var(--button-primary-border);
}
.btn-primary:hover {
background: var(--button-primary-bg-hover);
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-secondary {
background: var(--button-secondary-bg);
color: var(--button-secondary-fg);
border-color: var(--button-secondary-border);
}
.btn-secondary:hover {
background: var(--button-secondary-bg-hover);
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-full);
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all 0.15s;
}
.btn-ghost:hover {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.btn-danger {
background: var(--button-error-bg, #db1f2e);
color: #fff;
border: none;
border-radius: var(--radius-full);
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background 0.15s;
}
.btn-danger:hover:not(:disabled) {
background: var(--button-error-bg-hover, #ab0a15);
}
.btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-create-charger {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 16px;
font-size: var(--text-sm);
font-weight: 600;
font-family: inherit;
color: #fff;
background: var(--brand-500, #1170cf);
border: none;
border-radius: 9999px;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.btn-create-charger:hover {
background: var(--brand-600, #0353a8);
box-shadow: 0 1px 4px rgba(17, 112, 207, 0.25);
}
.btn-create-charger svg {
flex-shrink: 0;
}
.btn-icon {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-tertiary);
padding: 2px 4px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
transition: color 0.15s, background 0.15s;
}
.btn-icon:hover:not(:disabled) {
color: var(--color-text-primary);
background: var(--color-bg-quaternary);
}
/* ================================================================
DASHBOARD GRID
================================================================ */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--spacing-xl);
}
/* ================================================================
CHARGER CARDS
================================================================ */
.charger-card {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow 0.2s ease;
border: 1px solid var(--color-border-secondary);
}
.charger-card:hover {
box-shadow: var(--shadow-md);
}
.charger-card-header {
padding: var(--spacing-xl) var(--spacing-2xl);
display: flex;
flex-direction: column;
gap: 2px;
border-bottom: 1px solid var(--color-border-secondary);
}
.charger-header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.charger-id-label {
font-size: 10px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary);
}
.charger-name {
font-family: var(--font-family-serif, var(--font-family));
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
letter-spacing: -0.02em;
line-height: 1.3;
}
.charger-card-body {
padding: var(--spacing-xl) var(--spacing-2xl);
}
/* === Status Indicators === */
.status-row {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.status-dot.connected {
background: var(--success-500);
box-shadow: 0 0 4px rgba(29, 128, 95, 0.4);
}
.status-dot.disconnected {
background: var(--gray-300);
}
.status-text {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.status-text.connected {
color: var(--color-text-success);
}
.uptime-text {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-left: auto;
}
/* === OCPP Status Badge === */
.ocpp-status-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xxs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
border: 1px solid transparent;
}
.ocpp-status-badge.Available {
background: var(--badge-success-bg);
color: var(--badge-success-fg);
border-color: var(--badge-success-border);
}
.ocpp-status-badge.Charging {
background: var(--badge-brand-bg);
color: var(--badge-brand-fg);
border-color: var(--badge-brand-border);
}
.ocpp-status-badge.Preparing {
background: var(--badge-warning-bg);
color: var(--badge-warning-fg);
border-color: var(--badge-warning-border);
}
.ocpp-status-badge.Faulted {
background: var(--badge-error-bg);
color: var(--badge-error-fg);
border-color: var(--badge-error-border);
}
.ocpp-status-badge.Unavailable,
.ocpp-status-badge.unknown {
background: var(--badge-gray-bg);
color: var(--badge-gray-fg);
border-color: var(--badge-gray-border);
}
/* === Info rows inside card === */
.charger-info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) 0;
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
.charger-info-row + .charger-info-row {
border-top: 1px solid var(--color-border-tertiary);
}
.info-label {
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.info-value {
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
/* === WebSocket URL (copyable) === */
.ws-url {
font-family: var(--font-family-mono);
font-size: var(--text-xs);
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid var(--color-border-tertiary);
}
.ws-url:hover {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.ws-url .copy-icon {
flex-shrink: 0;
opacity: 0.4;
transition: opacity 0.15s;
}
.ws-url:hover .copy-icon {
opacity: 1;
}
/* === Charger Card Footer === */
.charger-card-footer {
padding: var(--spacing-lg) var(--spacing-2xl);
border-top: 1px solid var(--color-border-secondary);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.btn-card-action {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
background: none;
border: 1px solid var(--color-border-secondary);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease;
}
.btn-card-action:hover {
color: var(--color-text-brand-primary);
border-color: var(--color-text-brand-primary);
background: var(--color-bg-brand-secondary, rgba(17,112,207,0.06));
}
.btn-delete-charger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-quaternary, #A4A7AE);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
margin-left: auto;
}
.btn-delete-charger:hover {
background: rgba(220, 38, 38, 0.08);
color: #dc2626;
}
/* === Power/Energy stats row === */
.charger-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.stat-item {
display: flex;
flex-direction: column;
gap: var(--spacing-xxs);
}
.stat-label {
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stat-value {
font-size: var(--display-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.stat-value .unit {
font-size: var(--text-sm);
font-weight: var(--font-weight-regular);
color: var(--color-text-tertiary);
margin-left: 2px;
}
/* ================================================================
EMPTY STATE
================================================================ */
.empty-state {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
}
.empty-state-icon {
color: var(--color-text-quaternary, #A4A7AE);
margin-bottom: 20px;
opacity: 0.5;
}
.empty-state-title {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 8px;
color: var(--color-text-primary);
}
.empty-state-desc {
font-size: 14px;
color: var(--color-text-tertiary);
max-width: 360px;
line-height: 1.6;
margin-bottom: 24px;
}
.empty-state-btn {
padding: 10px 24px;
font-size: 15px;
}
/* ================================================================
MODAL
================================================================ */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-card {
background: var(--color-bg-primary, #fff);
border-radius: var(--radius-xl, 12px);
width: 90%;
max-width: 480px;
padding: var(--spacing-3xl);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-card h2 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-xl);
color: var(--color-text-primary);
}
.modal-card label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card select {
padding: var(--spacing-md) var(--spacing-lg);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: var(--font-family);
color: var(--input-text);
background: var(--input-bg);
transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-card input:focus,
.modal-card select:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: var(--input-ring-focus);
}
.modal-card small {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.modal-error {
margin-top: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--error-50);
color: var(--error-600);
border: 1px solid var(--error-200);
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
.modal-warning {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--warning-50);
color: var(--warning-600);
border: 1px solid var(--warning-200);
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
/* WebSocket URL preview in create dialog */
.ws-url-preview {
font-family: var(--font-family-mono);
font-size: var(--text-xs);
color: var(--color-text-brand-primary);
background: var(--color-bg-brand-subtle, rgba(17,112,207,0.06));
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-brand, rgba(17,112,207,0.2));
margin-top: var(--spacing-xs);
word-break: break-all;
}
/* ================================================================
LOGS
================================================================ */
.logs-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-xl);
gap: var(--spacing-lg);
}
.logs-header h2 {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.logs-controls {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.logs-filter {
padding: var(--spacing-md) var(--spacing-lg);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: var(--font-family);
background: var(--input-bg);
color: var(--input-text);
min-width: 180px;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23717680' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.logs-filter:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: var(--input-ring-focus);
}
.logs-container {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-secondary);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.logs-table-wrapper {
max-height: calc(100vh - 220px);
overflow-y: auto;
}
.logs-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.logs-table th {
position: sticky;
top: 0;
background: var(--color-bg-secondary);
padding: var(--spacing-lg) var(--spacing-xl);
text-align: left;
font-weight: var(--font-weight-medium);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-tertiary);
border-bottom: 1px solid var(--color-border-secondary);
z-index: 1;
}
.logs-table td {
padding: var(--spacing-md) var(--spacing-xl);
border-bottom: 1px solid var(--color-border-tertiary);
vertical-align: top;
}
.logs-table tr:hover td {
background: var(--color-bg-secondary);
}
.log-timestamp {
font-family: var(--font-family-mono);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
white-space: nowrap;
}
.log-direction {
font-weight: var(--font-weight-medium);
font-size: var(--text-xs);
}
.log-direction.sent { color: var(--brand-600); }
.log-direction.received { color: var(--success-600); }
.log-direction.info { color: var(--color-text-tertiary); }
.log-charger {
font-weight: var(--font-weight-semibold);
font-size: var(--text-xs);
color: var(--color-text-secondary);
}
.log-message-type {
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.log-payload {
font-family: var(--font-family-mono);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.log-payload.expanded {
white-space: pre-wrap;
word-break: break-all;
max-width: none;
}
.logs-empty {
padding: var(--spacing-6xl);
text-align: center;
color: var(--color-text-tertiary);
font-size: var(--text-sm);
}
/* ================================================================
SETTINGS
================================================================ */
.settings-container {
max-width: 640px;
}
.settings-section {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-secondary);
box-shadow: var(--shadow-sm);
padding: var(--spacing-3xl);
margin-bottom: var(--spacing-xl);
}
.settings-section h2 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-xs);
color: var(--color-text-primary);
}
.settings-section .section-desc {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
margin-bottom: var(--spacing-2xl);
}
.form-group {
margin-bottom: var(--spacing-xl);
}
.form-group:last-child {
margin-bottom: 0;
}
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-sm);
color: var(--color-text-secondary);
}
.form-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: var(--font-family);
color: var(--input-text);
background: var(--input-bg);
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:hover {
border-color: var(--input-border-hover);
}
.form-input:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: var(--input-ring-focus);
}
.form-input:disabled {
background: var(--input-disabled-bg);
border-color: var(--input-disabled-border);
color: var(--color-text-disabled);
cursor: not-allowed;
}
.form-hint {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-top: var(--spacing-sm);
}
/* API Key row */
.api-key-row {
display: flex;
gap: var(--spacing-xs);
align-items: center;
}
.api-key-row .form-input {
flex: 1;
font-family: var(--font-family-mono);
font-size: var(--text-sm);
letter-spacing: 0.02em;
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
}
/* ================================================================
TOAST
================================================================ */
.toast {
position: fixed;
bottom: var(--spacing-3xl);
right: var(--spacing-3xl);
background: var(--gray-900);
color: var(--color-text-white);
padding: var(--spacing-lg) var(--spacing-2xl);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
box-shadow: var(--shadow-lg);
z-index: 200;
transform: translateY(80px);
opacity: 0;
transition: all 0.3s ease;
}
.toast.visible {
transform: translateY(0);
opacity: 1;
}
.toast.error {
background: var(--error-600);
}
/* ================================================================
DARK MODE FIXES
================================================================ */
[data-theme="dark"] body {
color-scheme: dark;
}
[data-theme="dark"] .logs-filter {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394969C' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
}
[data-theme="dark"] .toast {
background: var(--gray-dark-200);
color: var(--gray-dark-950);
}
[data-theme="dark"] .toast.error {
background: var(--error-500);
color: #FFFFFF;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-md) 0;
}
.header-right {
gap: var(--spacing-md);
}
#app-header {
height: auto;
padding: var(--spacing-md) var(--spacing-xl);
}
#app-header h1 {
font-size: var(--text-md);
}
.dashboard-grid {
grid-template-columns: 1fr;
}
#app-content {
padding: var(--spacing-xl);
}
.logs-header {
flex-direction: column;
align-items: stretch;
}
}
/* ================================================================
Driver Portal — Dashboard page
================================================================ */
.dp-page {
max-width: 1280px;
margin: 32px auto 48px;
padding: 0 var(--spacing-3xl, 32px);
}
.dp-header {
margin-bottom: 24px;
}
/* Variant with trailing action slot — e.g. the RFID button next to the
* Wallbox page title. Stacks on narrow viewports so the title doesn't
* get squeezed when the button grows. */
.dp-header--with-actions {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.dp-header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.dp-header-actions .pd-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dp-header h2 {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.dp-subtitle {
color: var(--color-text-tertiary);
font-size: 14px;
line-height: 1.5;
}
.dp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
/* ------------------------------------------------------------------
New dashboard layout (v11 / stage-based) — Hero + Wizard + Action +
Feature tiles + Feedback banner. Replaces the old 3-card dp-grid.
------------------------------------------------------------------ */
.dp-stage {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: var(--spacing-2xl, 20px);
}
.dp-row {
display: grid;
gap: 20px;
}
.dp-row-2 { grid-template-columns: 1.1fr 1fr; }
.dp-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
.dp-row-2 { grid-template-columns: 1fr; }
.dp-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.dp-row-4 { grid-template-columns: 1fr; }
}
.dp-skel-shell {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 20px;
}
/* Hero card -------------------------------------------------------- */
.dp-hero {
padding: 28px 32px;
gap: 0;
}
.dp-hero-greet {
font-size: 14px;
color: var(--color-text-tertiary, #717680);
margin-bottom: 4px;
}
.dp-hero-greet a, .dp-hero-greet span { color: var(--brand-500, #1170cf); }
.dp-hero-title {
font-family: var(--font-family-serif, inherit);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 10px;
color: var(--color-text-primary, #181D27);
}
.dp-hero-sub {
font-size: 14px;
color: var(--color-text-tertiary, #717680);
margin: 0 0 18px;
line-height: 1.5;
max-width: 56ch;
}
.dp-hero-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
background: rgba(29,128,95,0.08);
color: #0c5e44;
margin-bottom: 14px;
}
.dp-hero-status.is-warn {
background: rgba(247,144,9,0.08);
color: #b45309;
}
.dp-hero-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--success-500, #1d805f);
box-shadow: 0 0 0 3px rgba(29,128,95,0.18);
}
.dp-hero-status.is-warn .dp-hero-dot {
background: #f59e0b;
box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
}
.dp-hero-note {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary, #181D27);
margin: 4px 0 20px;
}
/* Ready-for-payout badge — shown only when the setup wizard has hit 100%
(the dedicated wizard card is hidden in that state). Compact success
strip that also carries the next-proof-upload reminder. */
.dp-hero-ready {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
margin: 0 0 20px;
border-radius: 12px;
background: rgba(29, 128, 95, 0.08);
border: 1px solid rgba(29, 128, 95, 0.25);
color: var(--success-700, #155d3e);
font-size: 13px;
line-height: 1.45;
font-weight: 500;
}
.dp-hero-ready svg {
flex-shrink: 0;
color: var(--success-600, #1d805f);
}
.dp-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: auto;
}
.dp-kpi {
background: rgba(17,112,207,0.04);
border: 1px solid rgba(17,112,207,0.12);
border-radius: 12px;
padding: 16px 18px;
position: relative; /* anchor for the optional kpi-link overlay */
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
/* Full-tile overlay link (used by the mileage KPI in carcloud mode) so the
whole KPI card is clickable, not just a tiny "more" button. The actual
is invisible — hover affordance comes from the KPI tile itself. */
.dp-kpi-link {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 1;
}
.dp-kpi:has(.dp-kpi-link):hover {
background: rgba(17,112,207,0.08);
border-color: rgba(17,112,207,0.32);
cursor: pointer;
}
.dp-kpi:has(.dp-kpi-link):active {
transform: scale(0.99);
}
.dp-kpi-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-quaternary, #A4A7AE);
margin-bottom: 10px;
}
.dp-kpi-value {
font-family: var(--font-family-serif, inherit);
font-size: 26px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary, #181D27);
line-height: 1.05;
}
.dp-kpi-sub {
font-size: 12px;
color: var(--color-text-tertiary, #717680);
margin-top: 8px;
}
/* Setup Wizard ----------------------------------------------------- */
.dp-wiz { padding: 24px 28px; gap: 16px; }
.dp-wiz-title {
font-family: var(--font-family-serif, inherit);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
}
.dp-wiz-progress { margin: 4px 0; }
.dp-wiz-progress-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
color: var(--color-text-secondary, #535862);
margin-bottom: 8px;
}
.dp-wiz-pct { font-weight: 600; color: var(--color-text-primary, #181D27); }
.dp-wiz-bar-track {
height: 8px;
border-radius: 999px;
background: rgba(17,112,207,0.08);
overflow: hidden;
}
.dp-wiz-bar-fill {
height: 100%;
background: linear-gradient(90deg, #1170cf 0%, #1d805f 100%);
border-radius: 999px;
transition: width 0.3s ease;
}
.dp-wiz-complete {
background: rgba(29,128,95,0.06);
border: 1px solid rgba(29,128,95,0.18);
border-radius: 10px;
padding: 10px 14px;
}
.dp-wiz-complete-title {
font-size: 13px;
font-weight: 600;
color: #0c5e44;
}
.dp-wiz-complete-sub {
font-size: 12px;
color: var(--color-text-tertiary, #717680);
margin-top: 2px;
}
.dp-wiz-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.dp-wiz-step {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
background: #fff;
}
.dp-wiz-step.is-done { background: rgba(29,128,95,0.04); }
.dp-wiz-step-body { flex: 1; min-width: 0; }
.dp-wiz-step-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary, #181D27);
}
.dp-wiz-step-desc {
font-size: 12px;
color: var(--color-text-tertiary, #717680);
margin-top: 2px;
}
.dp-wiz-step-check {
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.08);
}
.dp-wiz-step.is-done .dp-wiz-step-check {
background: var(--success-500, #1d805f);
border-color: transparent;
}
/* Small grey "(optional)" tag next to the step title — used on step 6
(Fahrzeug koppeln) so the progress contribution is honest without
screaming "required". */
.dp-wiz-optional {
margin-left: 6px;
font-size: 11px;
font-weight: 500;
color: var(--color-text-tertiary, #717680);
}
/* When a wizard-step is pending AND has an href, the entire row is
wrapped in an . The wrapper inherits the visual look of the li and
shows a subtle hover state so it's discoverable without being loud. */
.dp-wiz-step-link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-decoration: none;
color: inherit;
padding: 12px 16px;
margin: -12px -16px;
border-radius: 12px;
transition: background 120ms ease;
}
.dp-wiz-step-link:hover {
background: rgba(17, 112, 207, 0.04);
}
/* Action cards ----------------------------------------------------- */
.dp-action {
padding: 24px 28px;
gap: 10px;
min-height: 180px;
}
.dp-action-title {
font-family: var(--font-family-serif, inherit);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
}
.dp-action-desc {
font-size: 14px;
color: var(--color-text-tertiary, #717680);
line-height: 1.55;
margin: 4px 0 auto;
}
.dp-action-btn {
align-self: flex-start;
padding: 10px 20px;
background: rgba(17,112,207,0.08);
color: var(--brand-600, #0353a8);
border-radius: 10px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: background 0.15s, color 0.15s;
}
.dp-action-btn:hover {
background: rgba(17,112,207,0.16);
color: var(--brand-700, #02408a);
}
/* Feature cards ---------------------------------------------------- */
.dp-feature {
text-decoration: none;
color: inherit;
padding: 22px 24px;
min-height: 180px;
gap: 14px;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dp-feature:hover {
box-shadow: 0 10px 24px rgba(17,24,40,0.08);
transform: translateY(-2px);
}
.dp-feature-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(17,112,207,0.10);
color: var(--brand-600, #0353a8);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dp-feature-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary, #181D27);
}
.dp-feature-desc {
font-size: 13px;
color: var(--color-text-tertiary, #717680);
line-height: 1.5;
}
/* Copy button (used by the short-URL banner) ---------------------- */
.dp-copy-btn {
padding: 10px 18px;
background: #fff;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary, #181D27);
cursor: pointer;
transition: all 0.12s ease;
}
.dp-copy-btn:hover {
border-color: var(--brand-500, #1170cf);
color: var(--brand-500, #1170cf);
}
/* Feedback banner -------------------------------------------------- */
.dp-feedback {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 28px;
background: #101828;
border-radius: 14px;
color: #f2f4f7;
}
.dp-feedback-text {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.88);
}
.dp-feedback-btn {
flex-shrink: 0;
padding: 10px 22px;
background: #fff;
color: #101828;
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.dp-feedback-btn:hover { background: #e9eaee; }
.dp-link {
color: var(--brand-500, #1170cf);
text-decoration: none;
font-weight: 500;
}
.dp-link:hover { text-decoration: underline; }
.dp-card {
background: var(--color-bg-primary, #ffffff);
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 14px;
padding: 20px 22px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
min-height: 200px;
}
.dp-card-error {
border-color: #FECDCA;
background: #ffe8ea;
color: #ab0a15;
}
/* Muted variant — used when a tile is in zero-state (no chargepoint yet,
no reimbursement data). Subtle dashed border so the card is clearly
"incomplete" without screaming error-red. */
.dp-card-muted {
border-style: dashed;
background: linear-gradient(180deg, rgba(245,239,228,0.3), rgba(255,255,255,0));
}
/* Setup card — big onboarding tile shown when chargepoint_id is empty.
Spans the full grid row so it dominates the page. */
.dp-grid-with-setup .dp-card-setup {
grid-column: 1 / -1;
background: linear-gradient(135deg, rgba(17,112,207,0.06) 0%, rgba(196,154,108,0.08) 100%);
border-color: rgba(17,112,207,0.25);
}
.dp-setup-title {
font-family: var(--font-family-serif, inherit);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 4px 0 8px;
color: var(--color-text-primary, #181D27);
}
.dp-setup-desc {
font-size: 14px;
line-height: 1.5;
color: var(--color-text-secondary, #535862);
margin: 0 0 16px;
max-width: 72ch;
}
.dp-setup-url {
display: flex;
align-items: stretch;
gap: 8px;
max-width: 720px;
margin-bottom: 4px;
}
.dp-setup-url code {
flex: 1;
font-family: var(--font-family-mono, "JetBrains Mono", monospace);
font-size: 13px;
padding: 10px 14px;
background: rgba(255,255,255,0.85);
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-setup-copy {
padding: 0 18px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
background: var(--color-bg-primary, #fff);
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
transition: all 0.12s ease;
}
.dp-setup-copy:hover {
border-color: var(--brand-500, #1170cf);
color: var(--brand-500, #1170cf);
}
/* Zero-state hint paragraph on muted cards. */
.dp-empty-hint {
font-size: 13px;
color: var(--color-text-tertiary, #717680);
line-height: 1.55;
margin: 4px 0 auto;
}
.dp-card-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
margin-bottom: 10px;
}
.dp-status-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.dp-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.dp-dot-green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.dp-dot-gray { background: #A4A7AE; }
.dp-dot-amber { background: #f59e0b; }
.dp-status-text {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
}
.dp-kv-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.dp-kv {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12.5px;
}
.dp-k { color: var(--color-text-tertiary, #717680); }
.dp-v { color: var(--color-text-primary); font-weight: 500; text-align: right; }
.dp-mono { font-family: var(--font-family-mono, 'JetBrains Mono', monospace); font-size: 12px; }
.dp-headline {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
.dp-headline-num {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
line-height: 1.1;
}
.dp-headline-sub {
font-size: 12px;
color: var(--color-text-tertiary);
}
.dp-card-footer {
margin-top: auto;
padding-top: 16px;
}
.dp-link {
color: var(--brand-500, #1170cf);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: color 0.15s;
}
.dp-link:hover { color: var(--brand-600, #0353a8); }
/* Skeleton shimmer */
.dp-card-skeleton { pointer-events: none; }
.dp-skel-line {
background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: dp-shimmer 1.5s infinite;
}
@keyframes dp-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
[data-theme="dark"] .dp-skel-line {
background: linear-gradient(90deg, #1f242F 0%, #2a303c 50%, #1f242F 100%);
background-size: 200% 100%;
}
@media (max-width: 640px) {
.dp-page { padding: 0 16px; }
.dp-grid { grid-template-columns: 1fr; }
}
/* ================================================================
Driver Portal — Charging page
================================================================ */
/* Soft warning when the vehicle-cloud sync is degraded — currently
used for the upstream Audi-login bug. Yellow, non-blocking; the
wallbox sessions below are still fully usable. */
.ch-cloud-banner {
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--warning-50, #fffaeb);
border: 1px solid var(--warning-200, #FEDF89);
border-radius: 10px;
padding: 12px 16px;
margin: 0 0 16px;
color: var(--warning-700, #b54708);
}
.ch-cloud-banner-icon {
font-size: 18px;
line-height: 1;
margin-top: 2px;
color: var(--warning-600, #dc6803);
}
.ch-cloud-banner-title {
font-weight: 600;
font-size: 13px;
color: var(--color-text-primary, #181D27);
margin-bottom: 2px;
}
.ch-cloud-banner-msg {
font-size: 13px;
color: var(--color-text-secondary, #535862);
line-height: 1.4;
}
.ch-cloud-banner-sub {
font-size: 12px;
color: var(--color-text-tertiary, #717680);
margin-top: 4px;
}
/* Approximate-energy marker for sessions reverse-engineered from
polled vehicle-snapshots (e.g. Audi via SoC × battery capacity).
Visual cue: dotted underline + leading "≈" already in the JSX —
neutral grey, not a warning. Tooltip explains the math. */
.ch-approx {
text-decoration: underline dotted;
text-underline-offset: 2px;
color: var(--color-text-secondary, #535862);
cursor: help;
}
.ch-toolbar {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
margin-bottom: 16px;
}
.ch-filter {
display: flex;
flex-direction: column;
gap: 4px;
}
.ch-filter-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
}
.ch-select {
/* Aligned visually with .pd-field inputs on #personaldata: same padding,
border, radius and focus treatment, plus a custom chevron so the
browser-default dropdown arrow doesn't clash with the rest of the
form widgets. ``appearance: none`` is required so Chrome/Firefox/
Safari all let us draw our own SVG arrow. */
padding: 9px 36px 9px 12px;
font-size: 14px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
background-color: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
font-family: inherit;
min-width: 200px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ch-select:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17, 112, 207, 0.12);
}
.ch-select:hover { border-color: var(--color-border-secondary, #98A2B3); }
.ch-select:disabled {
background-color: var(--color-bg-secondary, #fafafa);
color: var(--color-text-tertiary);
cursor: not-allowed;
}
[data-theme="dark"] .ch-select {
background-image: url("data:image/svg+xml;utf8,");
}
.ch-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 9999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
font-family: inherit;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ch-btn:hover {
background: var(--color-bg-secondary-hover, #f5f5f5);
border-color: #A4A7AE;
}
.ch-summary {
display: flex;
gap: 32px;
padding: 16px 22px;
border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
flex-wrap: wrap;
}
.ch-summary-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.ch-summary-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
}
.ch-summary-value {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
}
.ch-table-scroll {
overflow-x: auto;
}
.ch-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ch-table thead th {
padding: 10px 16px;
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
background: var(--color-bg-secondary, #fafafa);
border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
white-space: nowrap;
}
.ch-table tbody td {
padding: 10px 16px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
color: var(--color-text-primary);
white-space: nowrap;
}
.ch-table tbody tr:hover {
background: var(--color-bg-secondary, #fafafa);
}
.ch-td-mono {
font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
font-size: 12px;
}
.ch-td-tag {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text-secondary, #535862);
}
/* Aktueller Zählerstand headline above the summary chips. */
.ch-meter-headline {
display: flex;
align-items: baseline;
gap: 12px;
padding: 18px 24px 14px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.ch-meter-label {
font-size: 13px;
color: var(--color-text-tertiary, #717680);
font-weight: 500;
}
.ch-meter-value {
font-size: 22px;
font-weight: 600;
color: var(--color-text-primary, #181d27);
font-variant-numeric: tabular-nums;
}
/* Per-session "Erstatten" toggle (the right-most column). Visual style
borrows from the personal-data toggles: green = refundable, grey =
excluded from settlement. */
.ch-toggle {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
cursor: pointer;
vertical-align: middle;
}
.ch-toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.ch-toggle-slider {
position: absolute;
inset: 0;
background: var(--color-bg-tertiary, #d5d7da);
border-radius: 999px;
transition: background 0.15s ease;
}
.ch-toggle-slider::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ch-toggle-input:checked + .ch-toggle-slider {
background: var(--color-success, #16a34a);
}
.ch-toggle-input:checked + .ch-toggle-slider::before {
transform: translateX(16px);
}
.ch-row-excluded td:not(:last-child) {
opacity: 0.45;
text-decoration: line-through;
}
.ch-row-excluded td:last-child {
/* Don't strike-through the toggle itself */
opacity: 1;
}
/* ----------------------------------------------------------------------
Charging page — combined view (Wallbox + Vehicle)
Hero KPIs, source-tabs, unified row cards, empty states.
Theme-aware via --brand-* / --color-* tokens (DEKRA, Ampure, DCS auto).
---------------------------------------------------------------------- */
.ch-hero {
margin: 0 0 18px;
padding: 22px 24px;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
}
.ch-hero-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ch-hero-kpi {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ch-hero-kpi-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
}
.ch-hero-kpi-value {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.ch-hero-kpi-unit {
font-size: 18px;
font-weight: 400;
color: var(--color-text-tertiary);
letter-spacing: 0;
}
.ch-hero-kpi-sub {
font-size: 12px;
color: var(--color-text-tertiary);
margin-top: 2px;
}
.ch-hero-meter {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.ch-hero-meter-label {
font-size: 12px;
color: var(--color-text-tertiary);
font-weight: 500;
}
.ch-hero-meter-value {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
/* Source tabs — pill-style segmented switcher beside the month picker. */
.ch-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 9999px;
background: var(--color-bg-secondary, #fafafa);
}
.ch-tab {
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
border-radius: 9999px;
background: transparent;
color: var(--color-text-secondary, #535862);
font-family: inherit;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.ch-tab:hover {
color: var(--color-text-primary);
}
.ch-tab-active {
background: var(--color-bg-primary, #fff);
color: var(--brand-700, #0353a8);
border-color: var(--color-border-secondary, #e5e7eb);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* List of session cards — replaces the wide OCPP table from before. */
.ch-list {
display: flex;
flex-direction: column;
}
.ch-list-loading {
padding: 40px;
text-align: center;
color: var(--color-text-tertiary);
}
.ch-row-card {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
transition: background 0.12s;
}
.ch-row-card:last-child {
border-bottom: none;
}
.ch-row-card:hover {
background: var(--color-bg-secondary, #fafafa);
}
.ch-row-source {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 9999px;
white-space: nowrap;
}
.ch-row-source-wallbox {
background: var(--brand-50, #e7f1fb);
color: var(--brand-700, #0353a8);
}
.ch-row-source-vehicle {
background: var(--color-bg-tertiary, #f3f4f6);
color: var(--color-text-secondary, #535862);
}
.ch-row-meta {
font-size: 13px;
color: var(--color-text-secondary, #535862);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ch-row-meta-mono {
font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
font-size: 12px;
}
.ch-row-meta-loc {
color: var(--color-text-tertiary);
font-size: 12px;
}
.ch-row-sep {
color: var(--color-text-quaternary, #A4A7AE);
margin: 0 2px;
}
.ch-row-energy {
text-align: right;
min-width: 90px;
}
.ch-row-energy-value {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.ch-row-energy-sub {
font-size: 12px;
color: var(--color-text-tertiary);
margin-top: 2px;
}
.ch-row-toggle {
margin-left: 4px;
}
.ch-row-card-excluded .ch-row-meta,
.ch-row-card-excluded .ch-row-energy-value,
.ch-row-card-excluded .ch-row-energy-sub {
opacity: 0.45;
text-decoration: line-through;
}
.ch-row-card-excluded .ch-row-source {
opacity: 0.55;
}
/* Table layout for the charging session list. Replaces the older card
stack — proper columns + headers so the data lines up at a glance. */
.ch-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ch-table thead th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-quaternary, #A4A7AE);
padding: 10px 14px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
white-space: nowrap;
}
.ch-table th.ch-th-num,
.ch-table td.ch-td-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.ch-table th.ch-th-loc,
.ch-table td.ch-td-loc,
.ch-table th.ch-th-refund,
.ch-table td.ch-td-refund {
text-align: center;
width: 1%;
}
.ch-table tbody tr.ch-table-row {
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
transition: background 0.12s;
}
.ch-table tbody tr.ch-table-row:last-child {
border-bottom: none;
}
.ch-table tbody tr.ch-table-row:hover {
background: var(--color-bg-secondary, #fafafa);
}
.ch-table td {
padding: 12px 14px;
color: var(--color-text-secondary, #535862);
vertical-align: middle;
}
.ch-table td.ch-td-when > div:first-child {
color: var(--color-text-primary);
font-weight: 500;
}
.ch-cell-sub {
margin-top: 2px;
font-size: 12px;
color: var(--color-text-tertiary);
}
.ch-cell-mono {
font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}
.ch-cell-muted {
color: var(--color-text-quaternary, #A4A7AE);
}
.ch-td-num {
color: var(--color-text-primary);
font-weight: 600;
}
/* Home / away / unknown indicator. House icon for sessions inside the
driver's homezone, location-pin for everywhere else, neutral dash
when no homezone is configured or the row carries no coordinates. */
.ch-loc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
}
.ch-loc-home {
background: rgba(29, 128, 95, 0.10);
color: var(--success-700, #1d805f);
}
.ch-loc-away {
background: rgba(207, 32, 39, 0.08);
color: var(--color-text-secondary, #535862);
}
.ch-loc-unknown {
color: var(--color-text-quaternary, #A4A7AE);
font-weight: 600;
}
.ch-table-row-excluded td:not(.ch-td-refund) {
opacity: 0.45;
text-decoration: line-through;
}
.ch-table-row-excluded .ch-row-source {
opacity: 0.55;
}
@media (max-width: 640px) {
/* Drop the duration column on narrow screens — it lives in the
sub-line under the date if needed. Keeps the table readable
on phones without forcing horizontal scroll. */
.ch-table th:nth-child(4),
.ch-table td.ch-td-dur { display: none; }
.ch-table th, .ch-table td { padding-left: 10px; padding-right: 10px; }
}
/* Empty states — one component, four contexts (no-source / month / source-x). */
.ch-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 64px 24px;
min-height: 280px;
gap: 8px;
}
.ch-empty-icon {
width: 56px;
height: 56px;
color: var(--color-text-quaternary, #A4A7AE);
margin-bottom: 8px;
}
.ch-empty-title {
font-size: 17px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.ch-empty-body {
font-size: 14px;
color: var(--color-text-tertiary);
max-width: 460px;
line-height: 1.5;
margin: 0;
}
.ch-empty-actions {
margin-top: 16px;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.ch-empty-cta {
display: inline-flex;
align-items: center;
padding: 9px 18px;
font-size: 13px;
font-weight: 500;
border-radius: 9999px;
border: 1px solid var(--color-border-primary, #D5D7DA);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
text-decoration: none;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, border-color 0.15s;
}
.ch-empty-cta:hover {
background: var(--color-bg-secondary-hover, #f5f5f5);
border-color: var(--color-border-secondary, #98A2B3);
}
.ch-empty-cta-primary {
background: var(--brand-500, #1170cf);
color: #fff;
border-color: var(--brand-500, #1170cf);
}
.ch-empty-cta-primary:hover {
background: var(--brand-600, #0353a8);
border-color: var(--brand-600, #0353a8);
color: #fff;
}
/* Disabled CSV button — when the active tab has nothing to export. */
.ch-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--color-bg-secondary, #fafafa);
}
.ch-btn:disabled:hover {
background: var(--color-bg-secondary, #fafafa);
border-color: var(--color-border-primary, #D5D7DA);
}
@media (max-width: 640px) {
.ch-toolbar { flex-direction: column; align-items: stretch; }
.ch-select { min-width: 0; width: 100%; }
.ch-summary { gap: 16px; padding: 12px 16px; }
.ch-summary-value { font-size: 18px; }
.ch-hero { padding: 18px 16px; }
.ch-hero-grid { grid-template-columns: 1fr; gap: 16px; }
.ch-hero-kpi-value { font-size: 24px; }
.ch-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ch-tab { flex-shrink: 0; }
.ch-row-card {
grid-template-columns: auto 1fr;
grid-template-areas:
"source energy"
"meta energy"
"toggle toggle";
gap: 6px 12px;
padding: 12px 14px;
}
.ch-row-card .ch-row-source { grid-area: source; }
.ch-row-card .ch-row-meta { grid-area: meta; white-space: normal; }
.ch-row-card .ch-row-energy { grid-area: energy; }
.ch-row-card .ch-row-toggle { grid-area: toggle; justify-self: end; margin-top: 4px; }
.ch-empty { padding: 48px 16px; min-height: 220px; }
.ch-empty-actions { flex-direction: column; width: 100%; }
.ch-empty-cta { width: 100%; justify-content: center; }
}
/* Reimbursement — Monatsaufstellung table on the top of /#reimbursement.
DEKRA-style: Monat | kWh | Cent | Erstattungsbetrag | Download. */
.rb-months-card {
margin-bottom: 8px;
}
.rb-months-head {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.rb-months-head h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary, #181d27);
}
.rb-months-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.rb-months-table thead th {
padding: 10px 16px;
text-align: left;
font-weight: 500;
color: var(--color-text-tertiary, #717680);
border-bottom: 1px solid var(--color-border-secondary, #e9eaeb);
background: var(--color-bg-secondary, #fafafa);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.rb-months-table tbody td {
padding: 10px 16px;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
color: var(--color-text-primary);
white-space: nowrap;
}
.rb-months-table tbody tr:hover {
background: var(--color-bg-secondary, #fafafa);
}
.rb-months-table tbody tr:last-child td {
border-bottom: none;
}
.rb-dl-link {
color: var(--color-action, #0ea5e9);
text-decoration: none;
font-weight: 500;
}
.rb-dl-link:hover { text-decoration: underline; }
/* Source-of-truth badges for the months table — small inline pill that
tells the driver where this row came from (API import vs. computed). */
.dp-badge {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
vertical-align: middle;
text-transform: uppercase;
cursor: help;
}
.dp-badge--api {
background: #e0f2fe;
color: #075985;
border: 1px solid #bae6fd;
}
.dp-badge--local {
background: #f3f4f6;
color: #374151;
border: 1px solid #e5e7eb;
}
/* ================================================================
Driver Portal — Wallbox page (tabs)
Mirrors .pd-tabs but stays semantically separate so the wallbox
layout can evolve independently (e.g. PV-Optimization sub-grid).
================================================================ */
.wb-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
margin-bottom: 20px;
flex-wrap: wrap;
}
.wb-tab {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
background: transparent;
color: var(--color-text-tertiary, #717680);
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.wb-tab:hover { color: var(--color-text-primary); }
.wb-tab-active {
color: var(--brand-500, #1170cf);
border-bottom-color: var(--brand-500, #1170cf);
}
.wb-beta-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 9999px;
background: var(--brand-50, #e7f1fb);
color: var(--brand-700, #0353a8);
}
.wb-tab-panel {
min-height: 200px;
}
@media (max-width: 768px) {
.wb-tabs { overflow-x: auto; flex-wrap: nowrap; }
.wb-tab { white-space: nowrap; flex-shrink: 0; }
}
/* ================================================================
Driver Portal — PV Optimization (Beta)
Hero KPIs, provider coupling cards, chart wrapper, onboarding.
================================================================ */
.pv-beta-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-bottom: 16px;
background: var(--brand-50, #e7f1fb);
color: var(--brand-700, #0353a8);
border-radius: 8px;
font-size: 13px;
}
.pv-beta-banner svg {
flex-shrink: 0;
}
.pv-onboarding {
text-align: center;
padding: 40px 20px 32px;
}
.pv-onboarding-title {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.pv-onboarding-body {
font-size: 14px;
color: var(--color-text-tertiary);
max-width: 520px;
margin: 0 auto 24px;
line-height: 1.5;
}
.pv-providers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 12px;
}
.pv-provider-card {
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
padding: 18px 16px;
background: var(--color-bg-primary, #fff);
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 150px;
}
.pv-provider-card-header {
display: flex;
align-items: center;
gap: 10px;
}
.pv-provider-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
font-size: 14px;
color: #fff;
letter-spacing: 0.04em;
}
.pv-provider-icon.is-enphase { background: #f47b20; }
.pv-provider-icon.is-ecoflow { background: #0a9b8e; }
.pv-provider-icon.is-solaredge { background: #cf2027; }
.pv-provider-icon.is-victron { background: #005f9e; }
.pv-provider-icon.is-sma { background: #00558e; }
.pv-provider-icon.is-fronius { background: #d12027; }
.pv-provider-icon.is-huawei { background: #c7000b; }
.pv-provider-name {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.2;
}
.pv-provider-body {
font-size: 12px;
color: var(--color-text-tertiary);
line-height: 1.4;
flex: 1;
}
.pv-provider-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 9999px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
background: var(--brand-500, #1170cf);
color: #fff;
border: 1px solid var(--brand-500, #1170cf);
cursor: pointer;
font-family: inherit;
}
.pv-provider-cta:hover {
background: var(--brand-600, #0353a8);
color: #fff;
}
.pv-provider-cta-disabled {
background: var(--color-bg-secondary, #fafafa);
color: var(--color-text-tertiary);
border-color: var(--color-border-primary, #D5D7DA);
cursor: not-allowed;
}
.pv-provider-cta-disabled:hover {
background: var(--color-bg-secondary, #fafafa);
color: var(--color-text-tertiary);
}
/* Hero — KPIs always rendered (zero-values when no data yet). */
.pv-hero {
margin: 0 0 18px;
padding: 22px 24px;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
}
.pv-hero-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.pv-kpi {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pv-kpi-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-quaternary, #A4A7AE);
}
.pv-kpi-value {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.pv-kpi-unit {
font-size: 16px;
font-weight: 400;
color: var(--color-text-tertiary);
letter-spacing: 0;
}
.pv-kpi-sub {
font-size: 12px;
color: var(--color-text-tertiary);
margin-top: 2px;
}
/* Live power row — shown beneath hero when latest snapshot is fresh. */
.pv-live-row {
display: flex;
align-items: baseline;
gap: 18px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
flex-wrap: wrap;
}
.pv-live-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.pv-live-label {
font-size: 12px;
color: var(--color-text-tertiary);
}
.pv-live-value {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.pv-chart-wrap {
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
padding: 18px 20px 12px;
background: var(--color-bg-primary, #fff);
margin-bottom: 18px;
}
.pv-chart-title {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 8px;
}
.pv-chart-canvas {
width: 100%;
min-height: 280px;
}
/* Coupled-systems list — one card per coupling (Enphase, Ecoflow, …). */
.pv-couplings-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.pv-coupling-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
background: var(--color-bg-primary, #fff);
}
.pv-coupling-meta {
min-width: 0;
}
.pv-coupling-name {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.pv-coupling-detail {
font-size: 12px;
color: var(--color-text-tertiary);
}
.pv-coupling-status {
font-size: 11px;
font-weight: 600;
color: var(--brand-700, #0353a8);
background: var(--brand-50, #e7f1fb);
padding: 3px 8px;
border-radius: 9999px;
margin-left: 6px;
}
.pv-coupling-status.is-error {
color: #b42318;
background: #fef3f2;
}
.pv-coupling-disconnect {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 9999px;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary, #535862);
cursor: pointer;
font-family: inherit;
}
.pv-coupling-disconnect:hover {
background: var(--color-bg-secondary-hover, #f5f5f5);
color: var(--color-text-primary);
}
/* Excess-Charging Settings + Audit (Phase 1B) */
.pv-excess-section {
margin-top: 24px;
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 12px;
padding: 18px 20px;
background: var(--color-bg-primary, #fff);
}
.pv-excess-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 10px;
}
.pv-excess-subtitle {
font-size: 13px;
color: var(--color-text-tertiary);
margin: 0 0 16px;
}
.pv-excess-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 16px;
align-items: start;
}
.pv-excess-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.pv-excess-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary, #535862);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pv-excess-hint {
font-size: 11px;
color: var(--color-text-tertiary);
line-height: 1.4;
}
.pv-excess-input,
.pv-excess-select {
padding: 8px 12px;
font-size: 14px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
font-family: inherit;
width: 100%;
}
.pv-excess-input:focus,
.pv-excess-select:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17, 112, 207, 0.12);
}
.pv-excess-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
margin-top: 6px;
}
.pv-excess-save {
padding: 9px 20px;
border-radius: 9999px;
font-size: 13px;
font-weight: 500;
background: var(--brand-500, #1170cf);
color: #fff;
border: 1px solid var(--brand-500, #1170cf);
cursor: pointer;
font-family: inherit;
}
.pv-excess-save:hover {
background: var(--brand-600, #0353a8);
}
.pv-excess-save:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.pv-excess-audit {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.pv-excess-audit-title {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary, #535862);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.pv-excess-audit-empty {
font-size: 13px;
color: var(--color-text-tertiary);
padding: 8px 0;
}
.pv-excess-audit-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.pv-excess-audit-table thead th {
text-align: left;
padding: 6px 12px 6px 0;
font-size: 11px;
font-weight: 600;
color: var(--color-text-quaternary, #A4A7AE);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.pv-excess-audit-table tbody td {
padding: 6px 12px 6px 0;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
font-variant-numeric: tabular-nums;
color: var(--color-text-secondary, #535862);
}
.pv-excess-audit-status {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 9999px;
background: var(--brand-50, #e7f1fb);
color: var(--brand-700, #0353a8);
}
.pv-excess-audit-status.is-error {
background: #fef3f2;
color: #b42318;
}
/* Connect-Modal (SolarEdge / Ecoflow / Victron) */
.pv-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
backdrop-filter: blur(2px);
}
.pv-modal {
background: var(--color-bg-primary, #fff);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow: auto;
border: 1px solid var(--color-border-secondary, #e5e7eb);
}
.pv-modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
}
.pv-modal-body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.pv-modal-error {
padding: 8px 12px;
background: #fef3f2;
color: #b42318;
border-radius: 8px;
font-size: 13px;
}
.pv-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 6px;
}
.pv-modal-cancel {
padding: 9px 16px;
border-radius: 9999px;
font-size: 13px;
font-weight: 500;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #535862);
border: 1px solid var(--color-border-primary, #D5D7DA);
cursor: pointer;
font-family: inherit;
}
.pv-modal-cancel:hover {
background: var(--color-bg-secondary-hover, #f5f5f5);
}
@media (max-width: 768px) {
.pv-hero-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pv-kpi-value { font-size: 24px; }
.pv-coupling-card { grid-template-columns: auto 1fr; gap: 10px; }
.pv-coupling-disconnect { grid-column: 1 / -1; justify-self: end; }
.pv-excess-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.pv-hero-grid { grid-template-columns: 1fr; }
}
/* ================================================================
Driver Portal — Personal Data page
================================================================ */
.pd-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
margin-bottom: 20px;
flex-wrap: wrap;
}
.pd-tab {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
background: transparent;
color: var(--color-text-tertiary, #717680);
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
}
.pd-tab:hover { color: var(--color-text-primary); }
.pd-tab.active {
color: var(--brand-500, #1170cf);
border-bottom-color: var(--brand-500, #1170cf);
}
.pd-form {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.pd-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pd-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.pd-field > span {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary, #535862);
}
.pd-field input[type="text"],
.pd-field input[type="email"],
.pd-field input[type="number"],
.pd-field input[type="date"] {
padding: 9px 12px;
font-size: 14px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.pd-field input:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17, 112, 207, 0.12);
}
.pd-field input:disabled {
background: var(--color-bg-secondary, #fafafa);
color: var(--color-text-tertiary);
cursor: not-allowed;
}
.pd-field input[type="range"] { padding: 0; width: 100%; }
.pd-field small {
font-size: 11px;
color: var(--color-text-tertiary);
line-height: 1.4;
}
.pd-hint {
font-size: 13px;
color: var(--color-text-tertiary);
line-height: 1.5;
margin: 4px 0 12px;
}
.pd-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
.pd-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
border-radius: 9999px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-btn-primary {
background: var(--brand-500, #1170cf);
color: #ffffff;
border-color: var(--brand-500, #1170cf);
}
.pd-btn-primary:hover:not(:disabled) {
background: var(--brand-600, #0353a8);
border-color: var(--brand-600, #0353a8);
}
.pd-btn-ghost {
background: transparent;
color: var(--color-text-secondary, #535862);
border-color: var(--color-border-primary, #D5D7DA);
}
.pd-btn-ghost:hover:not(:disabled) {
background: var(--color-bg-secondary, #fafafa);
}
.pd-del-price {
padding: 4px 10px;
width: auto;
}
@media (max-width: 640px) {
.pd-grid-2 { grid-template-columns: 1fr; }
.pd-tabs { overflow-x: auto; flex-wrap: nowrap; }
.pd-tab { white-space: nowrap; }
}
/* ================================================================
Driver Portal — Reimbursement page
================================================================ */
.ch-btn.rb-pdf-btn {
background: var(--brand-500, #1170cf);
color: #fff;
border-color: var(--brand-500, #1170cf);
font-weight: 600;
}
.ch-btn.rb-pdf-btn:hover {
background: var(--brand-600, #0353a8);
border-color: var(--brand-600, #0353a8);
}
.rb-row-excluded td {
color: var(--color-text-quaternary, #A4A7AE);
text-decoration: line-through;
}
.rb-row-excluded td:last-child { text-decoration: none; }
/* Toggle switch */
.rb-switch {
display: inline-block;
position: relative;
width: 36px;
height: 20px;
cursor: pointer;
vertical-align: middle;
}
.rb-switch input { opacity: 0; width: 0; height: 0; }
.rb-switch span {
position: absolute;
inset: 0;
background: #D5D7DA;
border-radius: 9999px;
transition: background 0.15s;
}
.rb-switch span::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rb-switch input:checked + span { background: var(--brand-500, #1170cf); }
.rb-switch input:checked + span::before { transform: translateX(16px); }
.rb-switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }
/* Upload form */
.rb-upload-form {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.rb-upload-form input[type="file"] {
font-size: 13px;
font-family: inherit;
color: var(--color-text-secondary);
padding: 6px 0;
flex: 1;
min-width: 180px;
}
/* Proof list */
.rb-proofs-list {
list-style: none;
margin: 0;
padding: 0;
}
.rb-proofs-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
flex-wrap: wrap;
}
.rb-proofs-list li:last-child { border-bottom: none; }
.rb-proof-name {
font-weight: 500;
color: var(--color-text-primary);
flex: 1;
min-width: 160px;
}
.rb-proof-meta {
font-size: 11px;
color: var(--color-text-tertiary);
}
.rb-proof-actions {
display: flex;
gap: 6px;
margin-left: auto;
}
.rb-proof-actions .pd-btn {
padding: 4px 12px;
font-size: 12px;
}
@media (max-width: 640px) {
.rb-proofs-list li {
flex-direction: column;
align-items: flex-start;
}
.rb-proof-actions { margin-left: 0; }
}
/* Vehicles page */
.veh-day7-hint {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
background: var(--color-bg-secondary, #fafafa);
color: var(--color-text-tertiary);
font-size: 11px;
line-height: 1.4;
}
.veh-card .dp-card-footer {
margin-top: auto;
padding-top: 16px;
}
.veh-card .veh-connect-btn {
text-decoration: none;
}
/* Clickable brand card (not-yet-coupled, oauth/vwgroup brands). The whole
card is the click target — hover lifts it, focus ring for keyboard. */
.veh-card--clickable {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.veh-card--clickable:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.veh-card--clickable:focus-visible {
outline: 2px solid var(--color-border-brand, var(--brand-500, #1170cf));
outline-offset: 2px;
}
/* "coming soon" cards are non-interactive — dim them slightly. */
.veh-card--soon {
opacity: 0.7;
cursor: not-allowed;
}
/* Vehicle brand detail heading */
.veh-brand-heading {
font-family: var(--font-family-serif, 'Source Serif 4', Georgia, serif);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
/* Vehicle snapshot summary row — three normal tiles + one double-width
SoC chart tile. Hardcoded to 4 tracks of "1fr 1fr 1fr 2fr" so the chart
sits flush with the right edge on wide screens; on narrow viewports
we collapse to a single column so each tile gets the full width. */
.veh-summary-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
gap: 16px;
margin-top: 20px;
}
@media (max-width: 900px) {
.veh-summary-row { grid-template-columns: 1fr 1fr; }
.veh-chart-card { grid-column: span 2; }
}
@media (max-width: 540px) {
.veh-summary-row { grid-template-columns: 1fr; }
.veh-chart-card { grid-column: auto; }
}
/* SoC chart card — inline SVG. Header label + a small "current value"
strap above the plot, then the SVG fills the remaining space. */
.veh-chart-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.veh-chart-empty {
color: var(--color-text-tertiary);
font-size: 13px;
padding: 24px 4px;
text-align: center;
}
.veh-chart-meta {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.veh-chart-meta-num {
font-family: var(--font-family-serif, inherit);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary);
line-height: 1;
}
.veh-chart-meta-sub {
font-size: 12px;
color: var(--color-text-tertiary);
}
.veh-chart-svg {
width: 100%;
height: auto;
margin-top: 4px;
display: block;
}
.veh-chart-grid {
stroke: var(--color-border-tertiary, #f0f0f0);
stroke-width: 1;
stroke-dasharray: 2 3;
}
.veh-chart-label {
font-size: 9px;
fill: var(--color-text-quaternary, #A4A7AE);
font-family: inherit;
}
.veh-chart-line {
fill: none;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.veh-chart-area {
opacity: 0.16;
}
.veh-chart-dot {
stroke: var(--color-bg-primary, #fff);
stroke-width: 1.5;
}
/* Battery progress bar (Tesla/Volvo snapshot) */
.veh-battery-bar {
margin-top: 12px;
height: 8px;
border-radius: 9999px;
background: var(--color-bg-secondary, #fafafa);
overflow: hidden;
border: 1px solid var(--color-border-secondary, #e5e7eb);
}
.veh-battery-bar span {
display: block;
height: 100%;
transition: width 0.3s ease;
}
/* ================================================================
Day 8 — RFID / Support / ChargeFactor
================================================================ */
/* RFID pills */
.rfid-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
}
.rfid-pill-on { background: var(--brand-50, #dbf0ff); color: var(--brand-600, #0353a8); }
.rfid-pill-off { background: var(--color-bg-secondary, #fafafa); color: var(--color-text-tertiary, #717680); border: 1px solid var(--color-border-tertiary, #f0f0f0); }
/* Support tickets */
.sup-ticket {
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
padding: 16px 0;
}
.sup-ticket:last-child { border-bottom: none; }
.sup-ticket-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.sup-ticket-title {
font-weight: 600;
color: var(--color-text-primary);
flex: 1;
}
.sup-ticket-meta {
font-size: 11px;
color: var(--color-text-quaternary, #A4A7AE);
}
.sup-ticket-status {
display: inline-block;
padding: 2px 10px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sup-status-open { background: #dbf0ff; color: #0353a8; }
.sup-status-closed { background: #e5e7eb; color: #535862; }
.sup-status-in_progress, .sup-status-pending { background: #fff7cc; color: #7d4705; }
.sup-ticket-body {
color: var(--color-text-secondary, #535862);
font-size: 13px;
line-height: 1.55;
margin-top: 8px;
}
.sup-ticket-reply {
margin-top: 10px;
padding: 8px 12px;
background: var(--color-bg-secondary, #fafafa);
border-left: 3px solid var(--brand-500, #1170cf);
border-radius: 6px;
font-size: 12px;
color: var(--color-text-secondary);
}
.sup-ticket-del {
padding: 4px 10px;
font-size: 12px;
}
.pd-field textarea {
padding: 9px 12px;
font-size: 14px;
border: 1px solid var(--color-border-primary, #D5D7DA);
border-radius: 8px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary);
font-family: inherit;
resize: vertical;
}
.pd-field textarea:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17, 112, 207, 0.12);
}
/* Stars rating */
.sup-stars {
display: flex;
gap: 2px;
margin-top: 4px;
}
.sup-star {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: var(--color-border-primary, #D5D7DA);
transition: color 0.1s;
}
.sup-star.active { color: #f59e0b; }
.sup-star:hover { color: #f59e0b; }
.sup-star svg { display: block; }
.sup-rating-list {
list-style: none;
padding: 0;
margin: 0;
}
.sup-rating-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-tertiary, #f0f0f0);
flex-wrap: wrap;
}
.sup-rating-list li:last-child { border-bottom: none; }
.sup-rating-stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.sup-rating-comment { color: var(--color-text-secondary, #535862); flex: 1; font-size: 13px; min-width: 180px; }
.sup-rating-date { font-size: 11px; color: var(--color-text-quaternary, #A4A7AE); }
.sup-rating-del { padding: 4px 10px; }
/* ---------- Short URL banner (dashboard) ---------- */
.dp-short-url {
display: flex;
align-items: center;
gap: 16px;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, rgba(0,0,0,0.08));
border-radius: 12px;
padding: 16px 20px;
margin: 0 0 24px;
}
.dp-short-url-main { flex: 1; min-width: 0; }
.dp-short-url-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary, #717680); margin-bottom: 6px;
}
.dp-short-url-value code {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 14px; font-weight: 600;
color: var(--color-text-primary, #181D27); word-break: break-all;
}
.dp-short-url-hint {
font-size: 12px; color: var(--color-text-secondary, #535862); margin-top: 6px;
}
.dp-short-url-copy {
flex-shrink: 0; padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--color-border, rgba(0,0,0,0.08));
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #181D27);
font: inherit; font-size: 13px; cursor: pointer;
}
.dp-short-url-copy:hover {
background: var(--color-bg-secondary, #fafafa);
}
@media (max-width: 640px) {
.dp-short-url { flex-direction: column; align-items: stretch; }
}
/* ---------- Vehicles page: brand icons + VW-Group modal ---------- */
.veh-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.veh-brand-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
object-fit: contain;
background: #fff;
border: 1px solid var(--color-border, rgba(0,0,0,0.08));
border-radius: 8px;
padding: 4px;
}
[data-theme="dark"] .veh-brand-icon {
background: #f5f5f6;
}
/* ------------------------------------------------------------------
Reimbursement — Abrechnungsart-Toggle (Wallbox vs. Digital Home
Charging). Ported from the legacy reimbursement.html template so
the SPA can render the same control. Backing API lives at
/api/reimbursement/mode (GET + POST).
------------------------------------------------------------------ */
.dp-mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 700px) {
.dp-mode-toggle { grid-template-columns: 1fr; }
}
.dp-mode-option {
cursor: pointer;
margin: 0;
position: relative;
}
.dp-mode-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.dp-mode-card {
display: block;
padding: 14px 18px;
border: 1px solid var(--color-border-secondary, #e5e7eb);
border-radius: 10px;
background: #fff;
transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.dp-mode-option input:checked + .dp-mode-card {
border-color: var(--color-border-brand, #1170cf);
background: rgba(17, 112, 207, 0.06);
box-shadow: inset 0 0 0 1px var(--color-border-brand, #1170cf);
}
.dp-mode-option input:disabled + .dp-mode-card {
opacity: 0.5;
cursor: not-allowed;
}
.dp-mode-card-title {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--color-text-primary, #181D27);
margin-bottom: 2px;
}
.dp-mode-card-desc {
display: block;
font-size: 12px;
color: var(--color-text-secondary, #535862);
}
.dp-mode-locked {
margin-top: 12px;
padding: 8px 12px;
background: rgba(166, 94, 0, 0.08);
border: 1px solid rgba(166, 94, 0, 0.25);
border-radius: 8px;
font-size: 13px;
color: #a65e00;
}
.dp-mode-save {
margin-top: 12px;
font-size: 13px;
}
.dp-mode-save.is-ok { color: var(--success-500, #1d805f); }
.dp-mode-save.is-error { color: var(--error-500, #d92d20); }
/* ------------------------------------------------------------------
Vehicle page — state-differentiated layout (empty vs. coupled).
See /Users/seb/.claude/plans/groovy-wishing-badger.md (Phase A).
------------------------------------------------------------------ */
/* Empty state — onboarding hero shown when the driver has 0 coupled
vehicles. Full-width card with benefit copy + 3 bullets. Sits on top
of the full 9-brand grid. */
.veh-empty-hero {
padding: 32px;
margin-bottom: 0;
border-left: 4px solid var(--color-accent-primary, #1170cf);
}
.veh-empty-hero-title {
font-family: var(--font-family-serif, inherit);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--color-text-primary, #181D27);
margin: 0 0 10px;
}
.veh-empty-hero-body {
font-size: 14px;
line-height: 1.55;
color: var(--color-text-secondary, #535862);
margin: 0 0 16px;
max-width: 720px;
}
.veh-empty-hero-bullets {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px 24px;
}
.veh-empty-hero-bullets li {
font-size: 13px;
color: var(--color-text-primary, #181D27);
padding-left: 18px;
position: relative;
}
.veh-empty-hero-bullets li::before {
content: "✓";
color: var(--success-500, #1d805f);
position: absolute;
left: 0;
font-weight: 700;
}
/* Coupled state — one hero card per coupled brand, stacked vertically. */
.veh-coupled-heading {
font-family: var(--font-family-serif, inherit);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-text-tertiary, #717680);
margin: 4px 0 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
}
.veh-coupled-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.veh-coupled-hero {
padding: 20px 24px;
}
.veh-coupled-hero-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.veh-hero-brand-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
background: #fff;
border: 1px solid var(--color-border, rgba(0,0,0,0.08));
border-radius: 10px;
padding: 6px;
}
[data-theme="dark"] .veh-hero-brand-icon {
background: #f5f5f6;
}
.veh-coupled-hero-title {
flex: 1;
min-width: 0;
}
.veh-coupled-hero-brand {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.veh-coupled-hero-name {
margin: 2px 0 0;
font-family: var(--font-family-serif, inherit);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-text-primary, #181D27);
}
.veh-coupled-hero-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-text-secondary, #535862);
flex-shrink: 0;
}
.veh-coupled-hero-meta {
margin-bottom: 10px;
}
.veh-coupled-hero-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
}
.veh-hero-disconnect {
font-size: 12px;
color: var(--color-text-tertiary, #717680);
}
.veh-hero-disconnect:hover {
color: var(--error-500, #d92d20);
}
.veh-hero-disconnect[aria-disabled="true"] {
pointer-events: none;
opacity: 0.5;
}
/* Right-aligned cluster holding Synchronisieren + Trennen. Keeps the
optional "Ladesitzungen anzeigen" link on the left side of the footer. */
.veh-hero-actions-right {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
}
.veh-hero-sync {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--color-text-secondary, #535862);
}
.veh-hero-sync:hover {
color: var(--color-accent-primary, #1170cf);
}
.veh-hero-sync[aria-disabled="true"] {
pointer-events: none;
opacity: 0.6;
}
.veh-hero-sync.is-syncing .veh-hero-sync-icon {
animation: veh-spin 0.9s linear infinite;
}
@keyframes veh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* "Weitere Marke koppeln" toggle between heros and expanded brand grid. */
.veh-add-more {
display: flex;
justify-content: center;
margin: 20px 0 0;
}
.veh-add-more .pd-btn {
padding: 10px 18px;
font-size: 13px;
}
@media (max-width: 640px) {
.veh-empty-hero { padding: 24px; }
.veh-empty-hero-title { font-size: 20px; }
.veh-coupled-hero-head { flex-wrap: wrap; }
.veh-coupled-hero-status { width: 100%; }
}
.veh-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: veh-modal-fade 140ms ease-out;
}
@keyframes veh-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.veh-modal {
background: var(--color-bg-primary, #fff);
border-radius: 14px;
padding: 24px;
max-width: 440px;
width: 100%;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
animation: veh-modal-pop 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes veh-modal-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.veh-modal-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.veh-modal-head h3 {
flex: 1;
margin: 0;
font-size: 17px;
font-weight: 600;
color: var(--color-text-primary);
}
.veh-modal-close {
background: none; border: none;
font-size: 26px;
line-height: 1;
color: var(--color-text-tertiary);
cursor: pointer;
padding: 0 4px;
}
.veh-modal-close:hover { color: var(--color-text-primary); }
.veh-modal-help {
font-size: 13px;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0 0 18px;
}
.veh-modal-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.veh-modal-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
}
.veh-modal-form input {
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--color-border, rgba(0,0,0,0.12));
border-radius: 8px;
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: inherit;
}
.veh-modal-form input:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17,112,207,0.15);
}
.veh-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 6px;
}
.veh-modal-error {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
background: var(--color-bg-error-subtle, #fef3f2);
border: 1px solid #fecdca;
color: var(--color-text-error, #d92d20);
font-size: 13px;
line-height: 1.5;
}
.veh-modal-error a { color: inherit; text-decoration: underline; }
/* ---------- Empty-snapshot nudge (vehicles page) ---------- */
/* Shown on the vehicles page when a newly-coupled car hasn't synced yet.
Replaces a grey "no readings" line with a branded card: spinning sync
icon, three benefit bullets, and a CTA that fires the same sync link
the header already exposes. The brand accent colour for the left
border + CTA background is set inline per call so every brand feels
at home (Škoda green, BMW blue, ...). */
.veh-snapshot-empty {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
}
.veh-snapshot-empty-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(0, 0, 0, 0.04);
animation: veh-sync-pulse 2.4s ease-in-out infinite;
}
.veh-snapshot-empty-body {
flex: 1;
min-width: 0;
}
.veh-snapshot-empty-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--color-text-primary);
}
.veh-snapshot-empty-desc {
font-size: 14px;
line-height: 1.55;
color: var(--color-text-secondary);
margin: 0 0 12px;
}
.veh-snapshot-empty-bullets {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--color-text-primary);
}
.veh-snapshot-empty-cta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: var(--color-accent-primary, var(--brand-500, #1170cf));
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.veh-snapshot-empty-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
@keyframes veh-sync-pulse {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
/* ---------- Vehicle-details modal ---------- */
/* Long key-value list grouped into sections (Vehicle / Energy / Charging /
Comfort / Position / Maintenance). Inherits the standard .veh-modal-
overlay backdrop + container. Wider than the default modal so labels +
values fit on one line. */
.veh-details-modal {
max-width: 560px;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.veh-details-body {
overflow-y: auto;
padding: 4px 4px 12px;
}
.veh-detail-section {
padding: 16px 20px 4px;
}
.veh-detail-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wiz-accent, var(--color-text-tertiary));
margin: 0 0 8px;
}
.veh-detail-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 6px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
font-size: 13px;
}
.veh-detail-row:last-child { border-bottom: none; }
.veh-detail-k {
color: var(--color-text-secondary);
flex-shrink: 0;
}
.veh-detail-v {
color: var(--color-text-primary);
font-weight: 500;
text-align: right;
word-break: break-word;
}
/* ---------- VW-Group coupling wizard ---------- */
/* Multi-step modal: welcome → credentials → connecting → success. Inherits
the .veh-modal-overlay backdrop + base .veh-modal container. Each step
fills .veh-wiz-body; the top carries brand icon, title, progress bar and
"Schritt X von Y" label. ``--wiz-accent`` is the per-brand colour the
caller sets inline (e.g. DEKRA green), used for the progress bar fill,
focus rings, and the success checkmark. */
.veh-wiz {
max-width: 520px;
}
.veh-wiz-head {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 20px 12px;
border-bottom: 1px solid var(--color-border-secondary, rgba(0, 0, 0, 0.06));
}
.veh-wiz-brand-icon {
width: 36px;
height: 36px;
object-fit: contain;
flex-shrink: 0;
}
.veh-wiz-head h3 {
flex: 1;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-text-primary);
}
.veh-wiz-progress {
height: 3px;
background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.06));
overflow: hidden;
}
.veh-wiz-progress-bar {
height: 100%;
background: var(--wiz-accent, var(--color-accent-primary, #1170cf));
transition: width 0.25s ease;
}
.veh-wiz-steplabel {
padding: 10px 20px 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-tertiary);
}
.veh-wiz-body {
padding: 8px 20px 20px;
}
.veh-wiz-step {
display: flex;
flex-direction: column;
gap: 12px;
}
.veh-wiz-step--center {
align-items: center;
text-align: center;
padding: 12px 0 4px;
}
.veh-wiz-step-title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 4px 0 0;
color: var(--color-text-primary);
}
.veh-wiz-step-body {
font-size: 14px;
line-height: 1.55;
color: var(--color-text-secondary);
margin: 0;
}
.veh-wiz-bullets {
list-style: none;
padding: 4px 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.veh-wiz-bullets li {
font-size: 14px;
line-height: 1.5;
color: var(--color-text-primary);
padding-left: 2px;
}
.veh-wiz-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.veh-wiz-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
}
.veh-wiz-form input {
padding: 10px 12px;
font-size: 14px;
line-height: 20px;
border: 1px solid var(--color-border-primary, #d5d7da);
border-radius: 8px;
background: var(--color-bg-primary);
color: var(--color-text-primary);
transition: border-color 0.12s, box-shadow 0.12s;
}
.veh-wiz-form input:focus {
outline: none;
border-color: var(--wiz-accent, var(--color-accent-primary, #1170cf));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wiz-accent, #1170cf) 20%, transparent);
}
.veh-wiz-error {
padding: 10px 12px;
border-radius: 8px;
background: var(--color-bg-error-subtle, #fef3f2);
border: 1px solid #fecdca;
color: var(--color-text-error, #d92d20);
font-size: 13px;
line-height: 1.5;
}
.veh-wiz-error a {
color: inherit;
text-decoration: underline;
}
.veh-wiz-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 6px;
}
.veh-wiz-actions--center {
justify-content: center;
margin-top: 14px;
}
/* Loading spinner — conic-gradient + mask ring. Accent-coloured so it
matches the brand being connected. */
.veh-wiz-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
background: conic-gradient(from 0deg,
color-mix(in srgb, var(--wiz-accent, #1170cf) 0%, transparent),
var(--wiz-accent, var(--color-accent-primary, #1170cf))
);
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
animation: veh-wiz-spin 1s linear infinite;
margin-bottom: 4px;
}
@keyframes veh-wiz-spin {
to { transform: rotate(360deg); }
}
/* Success checkmark — circle badge in the accent colour with a scale-in pop. */
.veh-wiz-check {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--wiz-accent, var(--success-600, #1d805f));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: 700;
line-height: 1;
margin-bottom: 4px;
animation: veh-wiz-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes veh-wiz-pop {
from { transform: scale(0.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ---------- Inline-edit pattern (wallbox page) ---------- */
.dp-editable {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px 2px 4px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
max-width: 100%;
}
.dp-editable:hover {
background: var(--color-bg-active, rgba(17,112,207,0.06));
}
.dp-editable:hover .edit-pencil {
opacity: 1;
}
.dp-editable:focus-visible {
outline: 2px solid var(--brand-500, #1170cf);
outline-offset: 2px;
}
.dp-editable .edit-pencil {
flex-shrink: 0;
opacity: 0.35;
color: var(--color-text-tertiary, #717680);
transition: opacity 0.15s;
}
.dp-editable .dp-editable-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-editable.is-editing {
padding: 0;
cursor: default;
background: transparent;
gap: 6px;
}
.dp-editable.is-editing:hover { background: transparent; }
.dp-edit-input {
flex: 1;
min-width: 0;
padding: 6px 10px;
font: inherit;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 13px;
color: var(--color-text-primary, #181D27);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, rgba(0,0,0,0.12));
border-radius: 6px;
}
.dp-edit-input:focus {
outline: none;
border-color: var(--brand-500, #1170cf);
box-shadow: 0 0 0 3px rgba(17,112,207,0.15);
}
.dp-edit-input-error {
border-color: var(--error-500, #db1f2e);
box-shadow: 0 0 0 3px rgba(219,31,46,0.12);
}
.dp-edit-save,
.dp-edit-cancel {
flex-shrink: 0;
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 1px solid var(--color-border, rgba(0,0,0,0.12));
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #181D27);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.dp-edit-save:hover:not(:disabled) {
background: var(--brand-500, #1170cf);
border-color: var(--brand-500, #1170cf);
color: #fff;
}
.dp-edit-cancel:hover:not(:disabled) {
background: var(--color-bg-active, rgba(0,0,0,0.04));
}
.dp-edit-save:disabled,
.dp-edit-cancel:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================================
* /driver/#vehicles — Tabs + Hero-Detail redesign (2026-04-20)
* ========================================================================= */
/* Garage header row — title + subtitle on the left, ghost "Add" button on
* the right. Collapses to stacked on narrow screens so the add button
* doesn't fall off the grid. */
.veh-garage-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.veh-garage-title {
margin: 0 0 4px 0;
font-family: var(--font-family-serif, inherit);
font-weight: 500;
letter-spacing: -0.01em;
}
.veh-garage-add {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
white-space: nowrap;
}
/* Tab-bar shown only with 2+ coupled brands. Uses brand-accent colour via
* --tab-accent custom prop so each active tab picks up its brand's identity
* (Tesla red, BMW blue, Volvo dark-blue, etc.) instead of a generic highlight. */
.veh-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px;
margin-bottom: 20px;
background: var(--color-bg-secondary, #fafafa);
border: 1px solid var(--color-border-tertiary, #f0f0f0);
border-radius: 10px;
}
.veh-tab {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
text-align: left;
color: var(--color-text-secondary, #535862);
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.veh-tab:hover {
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #181D27);
}
.veh-tab:focus-visible {
outline: 2px solid var(--brand-500, #1170cf);
outline-offset: 2px;
}
.veh-tab--active {
background: var(--color-bg-primary, #fff);
border-color: var(--color-border, rgba(0,0,0,0.08));
color: var(--color-text-primary, #181D27);
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--tab-accent, transparent) inset;
}
.veh-tab-icon {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.veh-tab-label {
display: flex;
flex-direction: column;
min-width: 0;
}
.veh-tab-brand {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
}
.veh-tab-name {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* Active-vehicle header — identity band above the brand-specific detail
* cards. Replaces the old .veh-coupled-hero for the selected vehicle. */
.veh-active-detail {
/* intentionally empty — container for active vehicle */
}
.veh-active-header {
padding: 20px 24px;
margin-bottom: 16px;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border-tertiary, #f0f0f0);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.veh-active-title-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.veh-active-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
background: #fff;
border: 1px solid var(--color-border, rgba(0,0,0,0.08));
border-radius: 10px;
padding: 6px;
}
[data-theme="dark"] .veh-active-icon {
background: #f5f5f6;
}
.veh-active-title {
flex: 1;
min-width: 0;
}
.veh-active-brand {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.veh-active-name {
margin: 2px 0 0;
font-family: var(--font-family-serif, inherit);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--color-text-primary, #181D27);
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Pencil icon next to the vehicle name — nearly invisible until hover so
it doesn't clutter the layout for drivers who are happy with the
auto-generated label. */
.veh-active-name-edit {
background: transparent;
border: none;
padding: 4px;
border-radius: 6px;
cursor: pointer;
color: var(--color-text-quaternary, #A4A7AE);
opacity: 0.55;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.veh-active-name:hover .veh-active-name-edit { opacity: 1; }
.veh-active-name-edit:hover {
color: var(--color-accent-primary, #1170cf);
background: rgba(0, 0, 0, 0.04);
}
.veh-active-name-input {
font-family: inherit;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
padding: 4px 10px;
border: 1px solid var(--color-border-primary, #d5d7da);
border-radius: 8px;
background: #fff;
color: var(--color-text-primary);
min-width: 260px;
max-width: 100%;
}
.veh-active-name-input:focus {
outline: none;
border-color: var(--color-accent-primary, #1170cf);
box-shadow: 0 0 0 3px rgba(17, 112, 207, 0.18);
}
.veh-active-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-text-secondary, #535862);
flex-shrink: 0;
}
.veh-active-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
font-size: 12px;
}
.veh-active-kv {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.veh-active-k {
color: var(--color-text-tertiary, #717680);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.veh-active-v {
color: var(--color-text-primary, #181D27);
}
.veh-active-actions {
display: flex;
justify-content: flex-end;
gap: 18px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--color-border-tertiary, #f0f0f0);
font-size: 12px;
}
/* Wider modal for the brand-picker — the default .veh-modal is cramped
* for a responsive brand grid. */
.veh-modal-wide {
width: min(92vw, 820px);
max-height: 80vh;
overflow-y: auto;
}
.veh-modal-wide .dp-grid {
margin-top: 16px;
}
/* Compact brand tiles for the "Add vehicle" modal — three across on desktop,
two on tablet, one on mobile. Logo on top, brand name underneath; the
whole tile is the click target with a subtle lift + accent-border hover. */
.veh-brand-tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
}
.veh-brand-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 12px 16px;
min-height: 128px;
background: var(--color-bg-primary, #ffffff);
border: 1px solid var(--color-border-primary, #d5d7da);
border-radius: 12px;
cursor: pointer;
color: inherit;
font-family: inherit;
text-align: center;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.veh-brand-tile:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
border-color: var(--tile-accent, var(--color-accent-primary, #1170cf));
}
.veh-brand-tile:focus-visible {
outline: 2px solid var(--tile-accent, var(--color-accent-primary, #1170cf));
outline-offset: 2px;
}
.veh-brand-tile:active {
transform: translateY(0);
}
.veh-brand-tile-logo {
width: 44px;
height: 44px;
object-fit: contain;
flex-shrink: 0;
}
.veh-brand-tile-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--tile-accent, var(--color-text-primary));
line-height: 1.2;
}
.veh-brand-tile-note {
font-size: 10px;
color: var(--color-text-tertiary);
line-height: 1.3;
margin-top: 2px;
}
.veh-brand-tile--soon {
opacity: 0.55;
cursor: not-allowed;
}
.veh-brand-tile--soon:hover {
transform: none;
box-shadow: none;
border-color: var(--color-border-primary, #d5d7da);
}
@media (max-width: 640px) {
.veh-brand-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
.veh-brand-tile-grid { grid-template-columns: 1fr; }
}
/* Tablet / narrow-desktop adjustments */
@media (max-width: 720px) {
.veh-tab-name {
display: none; /* only brand label visible, icon acts as the cue */
}
.veh-tab {
padding: 8px 10px;
}
.veh-active-actions {
justify-content: flex-start;
}
}
/* === BMW CarData Device-Code wizard ======================================
Shares the .veh-wiz shell with the VW-group wizard; these rules cover
only the bits that are BMW-specific — the big user_code plate, the
copy-button, the "waiting for approval" spinner row, and the hint.
========================================================================= */
.veh-bmw-code-box {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 18px auto 12px;
padding: 18px 20px;
max-width: 360px;
background: linear-gradient(180deg,
rgba(28, 105, 212, 0.06) 0%,
rgba(28, 105, 212, 0.02) 100%);
border: 1px solid rgba(28, 105, 212, 0.25);
border-radius: 14px;
}
.veh-bmw-code {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 34px;
font-weight: 600;
letter-spacing: 4px;
color: var(--wiz-accent, #1c69d4);
user-select: all;
}
.veh-bmw-copy {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--wiz-accent, #1c69d4);
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(28, 105, 212, 0.35);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.veh-bmw-copy:hover {
background: rgba(28, 105, 212, 0.1);
border-color: rgba(28, 105, 212, 0.55);
}
.veh-bmw-copy:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(28, 105, 212, 0.2);
}
.veh-bmw-waiting {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 18px auto 6px;
padding: 10px 14px;
max-width: 360px;
font-size: 13px;
color: var(--color-text-secondary, rgba(0,0,0,0.62));
background: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.veh-bmw-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(28, 105, 212, 0.25);
border-top-color: var(--wiz-accent, #1c69d4);
border-radius: 50%;
animation: veh-bmw-spin 900ms linear infinite;
flex-shrink: 0;
}
@keyframes veh-bmw-spin { to { transform: rotate(360deg); } }
.veh-wiz-hint {
text-align: center;
color: var(--color-text-secondary, rgba(0,0,0,0.55));
font-size: 12px;
margin: 8px 0 0;
}
.veh-wiz-success {
text-align: center;
}
.veh-wiz-success-icon {
width: 64px;
height: 64px;
margin: 8px auto 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(29, 128, 95, 0.12);
color: #1d805f;
}
@media (prefers-reduced-motion: reduce) {
.veh-bmw-spinner { animation: none; }
}
/* BMW wizard — "Please read" callout. Amber accent + lightning bolt so
it breaks the reading-flow visually. Uses the same corner-radius and
padding rhythm as the wizard bullets, but with a warm left-edge
accent bar so it reads as a highlight, not a warning. */
.veh-bmw-please-read {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 14px 0 16px;
padding: 12px 14px;
background: linear-gradient(90deg,
rgba(245, 158, 11, 0.12) 0%,
rgba(245, 158, 11, 0.04) 100%);
border: 1px solid rgba(245, 158, 11, 0.35);
border-left: 4px solid #d97706;
border-radius: 10px;
}
.veh-bmw-please-read-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fef3c7;
color: #d97706;
animation: veh-bmw-bolt-pulse 2.4s ease-in-out infinite;
}
.veh-bmw-please-read-text {
flex: 1;
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--color-text-primary, #181D27);
}
.veh-bmw-please-read-text strong {
display: inline-block;
margin-right: 4px;
font-weight: 700;
color: #92400e;
letter-spacing: 0.2px;
}
@keyframes veh-bmw-bolt-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,0.45); }
50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) {
.veh-bmw-please-read-icon { animation: none; }
}