/* BudgetThuis - Brand refresh 2026 (TBWA\Studio Neboko) */
/* Self-hosted brand fonts — no external font requests. */

/* Primary type: Budget Greet Narrow (Bold) — display / headlines, ALL CAPS. */
@font-face {
    font-family: 'Budget Greet Narrow';
    src: url('../fonts/BudgetGreetNarrow-Bold.woff2') format('woff2'),
         url('../fonts/BudgetGreetNarrow-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Secondary type: Inter — body / UI. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== CSS Variables - BudgetThuis Brand ===== */
:root {
    /* ===== Budget Thuis 2026 palette ===== */
    /* Brand fonts */
    --font-display: 'Budget Greet Narrow', 'Arial Narrow', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --background: #F4F7F4;
    --foreground: #111111;

    --card: #FFFFFF;
    --card-foreground: #111111;

    --popover: #FFFFFF;
    --popover-foreground: #111111;

    /* BT Green — primary brand colour. Always paired with BLACK text. */
    --primary: #00D780;
    --primary-foreground: #000000;
    /* Accessible green for text/links/active states on light backgrounds. */
    --primary-strong: #029B77;

    /* Brand greens */
    --brand-green: #00D780;
    --brand-green-dark: #029B77;
    --brand-yellow: #F9FF00;

    /* BT Grey — subtle backgrounds */
    --secondary: #EBF2E8;
    --secondary-foreground: #111111;

    --muted: #F1F5F1;
    --muted-foreground: #6B7280;

    --accent: #EBF2E8;
    --accent-foreground: #029B77;

    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;

    --border: #E5E7EB;
    --input: #FFFFFF;
    --ring: #029B77;

    /* Status colors — dark green: readable as text AND visible as small dots/fills.
       Bright BT Green is reserved for large fills paired with black content. */
    --online: #029B77;
    --offline: #EF4444;
    /* BT Orange for warnings */
    --warning: #FF6C43;
    /* Semantic info — BT Blue family, darkened for text contrast on light */
    --info: #0077C8;

    /* Chart colors — brand-derived, readable on white */
    --chart-1: #00B7FF;
    /* BT Blue */
    --chart-2: #029B77;
    /* BT Dark Green */
    --chart-3: #FF6C43;
    /* BT Orange */
    --chart-4: #9196FF;
    /* BT Lila */
    --chart-5: #6B7280;

    --radius: 6px;

    /* Sidebar — brand Black with BT Green accents (green-on-black lockup) */
    --sidebar: #000000;
    --sidebar-foreground: #FFFFFF;
    --sidebar-primary: #00D780;
    --sidebar-primary-foreground: #000000;
    --sidebar-accent: #1A1A1A;
    --sidebar-accent-foreground: #FFFFFF;
    --sidebar-border: #1A1A1A;
    --sidebar-ring: #00D780;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Font sizes */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Radius */
    --radius-sm: 4px;
    /* --radius: 6px; already defined above */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Transitions */
    --duration-fast: 100ms;
    --duration-base: 150ms;
    --duration-slow: 300ms;

    /* Test environment colors */
    --test-orange: #E65100;
    --test-bg: #FFF3E0;
    --test-border: #FFB74D;

    /* (brand 2026: buttons are flat — no shadow tokens) */
}

/* ===== Base Styles ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
}

/* ===== Layout ===== */
.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--background);
}

.main-content {
    flex: 1;
    margin-left: 256px;
    min-height: 100vh;
    min-width: 0; /* a flex item defaults to min-width:auto, so a wide table would widen the page instead of scrolling inside its container */
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
    padding: 24px;
}

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 256px;
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
}

/* sidebar-header is defined in Inline Style Cleanup section below */

/* sidebar-logo is handled by sidebar-logo-container in Inline Style Cleanup section */

/* sidebar-title is defined in Inline Style Cleanup section below */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all var(--duration-base) ease;
    line-height: 1;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sidebar-foreground);
}

.sidebar-link.active {
    background: var(--sidebar-accent);
    color: var(--sidebar-foreground);
}

.sidebar-link svg {
    height: 16px;
    width: 16px;
    flex-shrink: 0;
}

.sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--destructive);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: 16px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-user-avatar {
    display: flex;
    height: 32px;
    width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sidebar-accent);
}

.sidebar-user-avatar svg {
    height: 16px;
    width: 16px;
    color: var(--sidebar-foreground);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sidebar-foreground);
}

/* ===== Header ===== */
.header {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    padding: 0 24px;
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.test-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--test-bg);
    color: var(--test-orange);
    border: 1px solid var(--test-border);
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.header-title-section h1 {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--foreground);
    margin: 0;
}

.header-title-section p {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-search {
    position: relative;
}

.header-search input {
    width: 256px;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
    /* White input */
    color: var(--foreground);
    font-size: 14px;
}

.header-search input::placeholder {
    color: var(--muted-foreground);
}

.header-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    color: var(--muted-foreground);
}

.header-notification {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
}

.header-notification:hover {
    background: var(--secondary);
}

.header-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    height: 16px;
    min-width: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 10px;
    font-weight: 500;
    padding: 0 4px;
}

.header-avatar {
    display: flex;
    height: 32px;
    width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 215, 128, 0.2);
}

.header-avatar span {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-strong);
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-slow) ease-in-out;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-6) 0;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid var(--brand-green);
}

.card-description {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.card-content {
    padding: var(--space-6);
}

.card-content.pt-0 {
    padding-top: 0;
}

/* ===== Metric Cards ===== */
.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-card-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-card-icon {
    height: 16px;
    width: 16px;
    color: var(--muted-foreground);
}

.metric-card-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.metric-card-value span:first-child {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
    line-height: 1.2 !important;
}

.metric-card-value span:last-child {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* One line of context under the value (MetricCard Caption); Unit stays for real units beside the number. */
.metric-card-caption {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.metric-card-oneline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.mcol-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcol-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.mcol-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.mcol-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mcol-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
}

.mcol-unit {
    font-size: 11px;
    color: var(--muted-foreground);
}

.metric-card-trend {
    font-size: 12px;
}

.metric-card-trend.up {
    color: var(--online);
}

.metric-card-trend.down {
    color: var(--destructive);
}

.metric-card-trend.stable {
    color: var(--muted-foreground);
}

.metric-card.card-charged {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.metric-card.card-charged .metric-card-icon {
    color: #059669;
}

.metric-card.card-discharged {
    background-color: #fffaf0;
    border-color: #fef3c7;
}

.metric-card.card-discharged .metric-card-icon {
    color: #d97706;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    /* Brand 2026 CTA: Inter bold, sentence case, rounded corners (guidelines p47-49) */
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--duration-base) ease;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* CTA colorway: BT Green + black text, flat (brand 2026: buttons carry no shadows) */
.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 90%, black);
}

/* Normal colorway: black + white text (guidelines p47) */
.btn-dark {
    background: #000000;
    color: #FFFFFF;
}

.btn-dark:hover:not(:disabled) {
    background: #1A1A1A;
}

.btn-primary::after {
    content: ' →';
    font-weight: 400;
}

/* Segmented/filter controls reuse .btn-primary for their selected state. That's a state,
   not a call to action, so it must not carry the CTA arrow. */
.btn-toggle::after {
    content: none;
}

.btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.1);
}

.btn-outline {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
}

.btn-outline:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
}

.btn-ghost {
    background: transparent;
    color: var(--foreground);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--accent);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.btn-icon {
    padding: 8px;
}

.btn-icon.btn-sm {
    height: 32px;
    width: 32px;
    padding: 0;
}

/* ===== Inputs ===== */
.input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
    /* White input */
    color: var(--foreground);
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.input:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(2, 155, 119, 0.12);
}

.input::placeholder {
    color: var(--muted-foreground);
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-left: 36px;
}

.input-with-icon svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    color: var(--muted-foreground);
    pointer-events: none;
}

/* ===== Labels ===== */
.label {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* ===== Select ===== */
.select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.select:focus {
    outline: none;
    border-color: var(--ring);
}

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}

.badge-default {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.badge-outline {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-foreground);
}

.badge-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--online);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* ===== Tables ===== */
.table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: auto;
    max-height: 70vh;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover td {
    background: var(--secondary);
    cursor: pointer;
}

.table th button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.table th button:hover {
    color: var(--foreground);
}

/* ===== Tabs ===== */
.tabs-list {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--secondary);
}

.tabs-trigger {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tabs-trigger:hover {
    color: var(--foreground);
}

.tabs-trigger.active {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Tabs rendered as NavLinks (Admin › Chat-bot): no link underline, visible keyboard focus. */
.tabs-list a.tabs-trigger {
    text-decoration: none;
}

.tabs-trigger:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.tabs-content {
    margin-top: 16px;
}

/* ===== Status Indicators ===== */
.status-dot {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
}

.status-dot.online {
    background: var(--online);
}

.status-dot.offline {
    background: var(--destructive);
}

.status-text.online {
    color: var(--online);
}

.status-text.offline {
    color: var(--muted-foreground);
}

/* ===== Progress Bars ===== */
.progress {
    height: 12px;
    border-radius: 9999px;
    background: var(--muted);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.progress-bar.online {
    background: var(--online);
}

.progress-bar.offline {
    background: var(--offline);
}

.progress-bar.destructive {
    background: var(--destructive);
}

/* ===== Checkboxes ===== */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox {
    height: 16px;
    width: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    cursor: pointer;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox:checked {
    background: var(--primary);
    border-color: var(--primary-strong);
}

.checkbox:checked::after {
    content: '✓';
    color: var(--primary-foreground);
    font-size: 10px;
}

.checkbox-label {
    font-size: 14px;
    color: var(--muted-foreground);
    cursor: pointer;
}

/* ===== Switches ===== */
.switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 9999px;
    background: var(--input);
    cursor: pointer;
    transition: background 0.2s ease;
}

.switch.checked {
    background: var(--primary);
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.switch.checked::after {
    transform: translateX(20px);
}

/* ===== Module Cards ===== */
.module-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    transition: all 0.15s ease;
}

.module-card:hover {
    background: var(--secondary);
}

.module-card.selected {
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 2px rgba(2, 155, 119, 0.12);
}

.module-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.module-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.module-card-status {
    font-size: 12px;
    font-weight: 500;
}

.module-card-status.charging {
    color: var(--online);
}

.module-card-status.discharging {
    color: var(--warning);
}

.module-card-status.idle {
    color: var(--muted-foreground);
}

.module-card-status.fault {
    color: var(--destructive);
}

.module-card-sn {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--muted-foreground);
    margin-bottom: 12px;
}

.module-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.module-card-metric {
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-card-metric svg {
    height: 12px;
    width: 12px;
    color: var(--muted-foreground);
}

.module-card-metric span {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.module-card-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.module-card-footer-label {
    color: var(--muted-foreground);
}

.module-card-footer-value {
    font-family: var(--font-mono);
    color: var(--foreground);
}

/* ===== Charts ===== */
.chart-container {
    height: 420px;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
}

.chart-loading {
    height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted-foreground);
}

.chart-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--muted);
    border-top-color: var(--primary-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.chart-empty {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

/* ===== Date Picker ===== */
.date-picker {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--secondary);
    color: var(--foreground);
    font-size: 14px;
}

.date-picker:focus {
    outline: none;
    border-color: var(--ring);
}

/* Day chart toolbar (DayChartCard.razor): the visible text is the Dutch short date
   ("1 nov 2026"); the real date input is invisible but covers the pill, so a click
   anywhere opens the native picker. 16px font prevents the iOS focus zoom. */
.date-picker-overlay {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.date-picker-overlay:focus-within {
    border-color: var(--ring);
}

.date-picker-overlay input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* ===== Date navigator (DateNavigator.razor — customer day/price charts) ===== */
.date-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Bigger tap targets than the default toolbar icon buttons. */
.date-nav .date-nav-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.date-nav-display {
    position: relative;
    flex: 1;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--secondary);
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.date-nav-display:focus-within {
    border-color: var(--ring);
}

/* The real date input is invisible but covers the whole display, so a tap anywhere
   opens the native picker. 16px font prevents the iOS focus zoom. */
.date-nav-display input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.pagination-info {
    font-size: 14px;
    color: var(--muted-foreground);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--secondary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary-strong);
}

/* ===== Raw JSON Viewer ===== */
.raw-json-container {
    height: 500px;
    overflow-y: auto;
}

.raw-json-item {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.raw-json-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.raw-json-header:hover {
    background: var(--secondary);
}

.raw-json-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.raw-json-header-left svg {
    height: 16px;
    width: 16px;
    color: var(--muted-foreground);
}

.raw-json-header-id {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--muted-foreground);
}

.raw-json-header-time {
    font-size: 12px;
    color: var(--foreground);
}

.raw-json-copy {
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.raw-json-copy:hover {
    background: var(--secondary);
}

.raw-json-copy.copied {
    color: var(--online);
}

.raw-json-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.raw-json-content.expanded {
    max-height: 400px;
}

.raw-json-content pre {
    padding: 12px;
    margin: 0;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--foreground);
    background: rgba(0, 0, 0, 0.03);
    overflow-x: auto;
}

/* ===== Search Card ===== */
.search-card {
    border-color: rgba(2, 155, 119, 0.2);
    background: rgba(0, 215, 128, 0.05);
}

.search-card .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-card .card-title svg {
    height: 20px;
    width: 20px;
    color: var(--primary-strong);
}

.search-form {
    display: flex;
    gap: 12px;
}

.search-form .input {
    flex: 1;
    background: var(--card);
}

.search-error {
    font-size: 14px;
    color: var(--destructive);
    margin-top: 8px;
}

/* ===== Stat Cards Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stats-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 1400px) {
    .stats-grid-7 {
        grid-template-columns: repeat(7, minmax(120px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 1024px) {
    .stats-grid-7 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid-7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.stat-card-icon {
    display: flex;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--secondary);
}

.stat-card-icon svg {
    height: 15px;
    width: 15px;
    color: var(--muted-foreground);
}

.stat-card-icon.online {
    background: rgba(34, 197, 94, 0.1);
}

.stat-card-icon.online svg {
    color: var(--online);
}

.stat-card-icon.offline {
    background: rgba(107, 114, 128, 0.1);
}

.stat-card-icon.offline svg {
    color: var(--offline);
}

.stat-card-icon.destructive {
    background: rgba(239, 68, 68, 0.1);
}

.stat-card-icon.destructive svg {
    color: var(--destructive);
}

.stat-card-icon.primary {
    background: rgba(0, 215, 128, 0.1);
}

.stat-card-icon.primary svg {
    color: var(--primary-strong);
}

.stat-card-icon.success {
    background: rgba(34, 197, 94, 0.1);
}

.stat-card-icon.success svg {
    color: var(--online);
}

.stat-card-icon.warning {
    background: rgba(251, 191, 36, 0.1);
}

.stat-card-icon.warning svg {
    color: var(--warning);
}

.stat-card-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.stat-card-value.online {
    color: var(--online);
}

.stat-card-value.offline {
    color: var(--offline);
}

.stat-card-value.destructive {
    color: var(--destructive);
}

.stat-card-label {
    font-size: 11px;
    color: var(--muted-foreground);
    line-height: 1.3;
    margin-top: 2px;
}

/* ===== Empty Slot ===== */
.empty-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.02);
}

.empty-slot span {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== Login Page (base / non-login contexts) ===== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    padding: 16px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.login-demo {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.login-demo-title {
    font-size: 12px;
    color: var(--muted-foreground);
    text-align: center;
    margin-bottom: 8px;
}

.login-demo-accounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.login-demo-account {
    padding: 8px;
    border-radius: 8px;
    background: var(--secondary);
}

.login-demo-account-role {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 4px;
}

.login-demo-account p {
    font-size: 12px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== Grid Layouts ===== */
.grid {
    display: grid;
    gap: 16px;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.col-span-2 {
    grid-column: span 2;
}

/* ===== Flexbox Utilities ===== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.gap-6 {
    gap: 24px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

/* ===== Spacing Utilities ===== */
.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-6 {
    margin-top: 24px;
}

.pt-4 {
    padding-top: 16px;
}

/* ===== Text Utilities ===== */
.text-sm {
    font-size: 14px;
}

.text-xs {
    font-size: 12px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 20px;
}

.text-2xl {
    font-size: 24px;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-muted {
    color: var(--muted-foreground);
}

.text-foreground {
    color: var(--foreground);
}

.text-primary {
    color: var(--primary-strong);
}

.text-online {
    color: var(--online);
}

.text-offline {
    color: var(--offline);
}

.text-destructive {
    color: var(--destructive);
}

.text-warning {
    color: var(--warning);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-mono {
    font-family: var(--font-mono);
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Border Utilities ===== */
.border-t {
    border-top: 1px solid var(--border);
}

.border-b {
    border-bottom: 1px solid var(--border);
}

/* ===== Width/Height Utilities ===== */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

/* ===== Rounded Utilities ===== */
.rounded {
    border-radius: var(--radius);
}

.rounded-lg {
    border-radius: 8px;
}

.rounded-full {
    border-radius: 9999px;
}

/* ===== Background Utilities ===== */
.bg-muted {
    background: var(--muted);
}

.bg-secondary {
    background: var(--secondary);
}

.bg-card {
    background: var(--card);
}

/* ===== Activity Item ===== */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
}

.activity-icon {
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.activity-icon.success {
    background: rgba(34, 197, 94, 0.2);
}

.activity-icon.success svg {
    color: var(--online);
}

.activity-icon.warning {
    background: rgba(234, 179, 8, 0.2);
}

.activity-icon.warning svg {
    color: var(--warning);
}

.activity-icon.info {
    background: rgba(0, 183, 255, 0.2);
}

.activity-icon.info svg {
    color: var(--info);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.activity-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.activity-time {
    font-size: 12px;
    color: var(--muted-foreground);
}

.activity-description {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== Notification Channel ===== */
.notification-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.notification-channel-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-channel-icon {
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--secondary);
}

.notification-channel-icon svg {
    height: 20px;
    width: 20px;
    color: var(--muted-foreground);
}

.notification-channel-target {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--foreground);
}

.notification-channel-last-used {
    font-size: 12px;
    color: var(--muted-foreground);
}

.notification-channel-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===== Notification Outbox Item ===== */
.outbox-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.outbox-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.outbox-item-left svg {
    height: 16px;
    width: 16px;
}

.outbox-item-left svg.success {
    color: var(--online);
}

.outbox-item-left svg.pending {
    color: var(--warning);
}

.outbox-item-left svg.failed {
    color: var(--destructive);
}

.outbox-item-type {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.outbox-item-device {
    font-size: 12px;
    color: var(--muted-foreground);
}

.outbox-item-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== Future Extension Card ===== */
.future-card {
    border-style: dashed;
}

.future-item {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.future-item h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 4px;
}

.future-item p {
    font-size: 12px;
    color: var(--muted-foreground);
    margin: 0;
}

.future-item .badge {
    margin-top: 8px;
}

/* ===== P1 Meter Card ===== */
.p1-meter-card {
    margin-top: 24px;
}

.p1-meter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.p1-meter-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.p1-meter-title svg {
    height: 20px;
    width: 20px;
    color: var(--primary-strong);
}

.p1-meter-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.p1-phase {
    padding: 16px;
    border-radius: 8px;
    background: var(--secondary);
}

.p1-phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.p1-phase-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.p1-phase-power {
    font-size: 18px;
    font-weight: 600;
}

.p1-phase-power.negative {
    color: var(--online);
}

.p1-phase-power.positive {
    color: var(--info);
}

.p1-phase-details {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--muted-foreground);
}

.p1-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.p1-total {
    text-align: center;
}

.p1-total-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
}

.p1-total-label {
    font-size: 12px;
    color: var(--muted-foreground);
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .main-content {
        margin-left: 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Loading Animation ===== */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.skeleton {
    background: var(--muted);
    border-radius: 4px;
    animation: pulse 2s ease-in-out infinite;
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
}

/* ===== Blazor Error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Modal Styles ===== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modal-fade-in 150ms ease;
}

.modal {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modal-scale-in 150ms ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-content {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}

.modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.modal-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--muted);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal-list-item:hover {
    background: var(--accent);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* ===== Notification Styles ===== */
.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
}

.notification-icon.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.notification-icon.info {
    background: rgba(0, 183, 255, 0.15);
    color: var(--info);
}

.notification-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    background: var(--muted);
    border-radius: var(--radius);
    border-left: 3px solid transparent;
}

.notification-row.error {
    border-left-color: var(--destructive);
}

.notification-row.warning {
    border-left-color: var(--warning);
}

.notification-row.info {
    border-left-color: var(--info);
}

.notification-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.progress-bar.primary {
    background: var(--primary);
}

/* ===== Dashboard Section Styles ===== */
.dashboard-section {
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-icon.batteries {
    background: rgba(34, 197, 94, 0.15);
    color: var(--online);
}

.section-icon.p1meters {
    background: rgba(0, 183, 255, 0.15);
    color: var(--info);
}

.section-icon.customers {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.section-icon.notifications {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* Alert styles */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: 14px;
}

.alert svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.alert .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--destructive);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-success {
    background: rgba(0, 215, 128, 0.1);
    color: var(--online);
    border: 1px solid rgba(0, 215, 128, 0.3);
}

.alert-info {
    background: rgba(0, 183, 255, 0.1);
    color: var(--info);
    border: 1px solid rgba(0, 183, 255, 0.3);
}

/* Customer Metrics Connectivity */
.customer-metrics-container {
    background: var(--muted);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.customer-metrics-container .metric-card {
    background: var(--card);
}

/* Ensure horizontal grid doesn't wrap too easily */
.dashboard-section .grid {
    display: grid;
    width: 100%;
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1400px) {
    .grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    .grid-cols-6,
    .grid-cols-5,
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Chart Styles ===== */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--card);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
}

.chart-loading,
.chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted-foreground);
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.reset-zoom-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    background: white !important;
    opacity: 0.8;
}

.reset-zoom-btn:hover {
    opacity: 1;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top: 2px solid var(--primary-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== Realtime / Live Chart ===== */
.rt-card {
    border: 1px solid oklch(0.85 0.08 250 / 0.4);
    background: linear-gradient(180deg, oklch(0.98 0.01 250 / 0.3) 0%, var(--card) 100%);
}

.rt-card .card-header {
    background: linear-gradient(90deg, oklch(0.96 0.02 250 / 0.4) 0%, transparent 100%);
}

.rt-chart-area {
    position: relative;
    height: 370px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
}

.rt-chart-area canvas {
    width: 100%;
    height: 100%;
}

/* Live status indicator */
.rt-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
}

.rt-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.rt-status.live {
    color: oklch(0.45 0.15 145);
    background: oklch(0.92 0.06 145 / 0.5);
}

.rt-status.live .rt-status-dot {
    background: oklch(0.55 0.2 145);
    box-shadow: 0 0 6px oklch(0.55 0.2 145 / 0.6);
    animation: rt-pulse 2s ease-in-out infinite;
}

.rt-status.stale {
    color: oklch(0.45 0.12 70);
    background: oklch(0.92 0.06 70 / 0.5);
}

.rt-status.stale .rt-status-dot {
    background: oklch(0.6 0.18 70);
}

.rt-status.error {
    color: oklch(0.45 0.15 25);
    background: oklch(0.92 0.06 25 / 0.5);
}

.rt-status.error .rt-status-dot {
    background: oklch(0.55 0.2 25);
}

.rt-status.paused {
    color: var(--muted-foreground);
    background: oklch(0.92 0.01 260 / 0.5);
}

.rt-status.paused .rt-status-dot {
    background: var(--muted-foreground);
}

@keyframes rt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

/* Pause/play button */
.rt-btn-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s ease;
}

.rt-btn-pause:hover {
    background: var(--accent);
    color: var(--foreground);
}

/* Loading/empty overlay for realtime chart */
.rt-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted-foreground);
    background: oklch(0.98 0.005 260 / 0.85);
    z-index: 10;
    font-size: 13px;
}

/* ===== Compact Status Bar ===== */
.status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    flex-wrap: wrap;
}

.status-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.status-bar-icon {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.status-bar-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-bar-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

/* Status tiles that open the Beheer section (Modus, Stopcontact). */
.status-bar-link {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
}

.status-bar-link:hover {
    background: var(--muted);
}

.status-bar-link:hover .status-bar-value {
    text-decoration: underline;
}

.status-bar-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.status-bar-edit {
    width: 12px;
    height: 12px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.status-bar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

.status-bar-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* ===== Battery State Inline (merged into status bar) ===== */
.battery-state-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.battery-state-inline.idle {
    color: var(--muted-foreground);
    background: oklch(0.95 0.01 260 / 0.6);
}

.battery-state-inline.charging {
    color: oklch(0.35 0.15 145);
    background: oklch(0.92 0.06 145 / 0.5);
}

.battery-state-inline.discharging {
    color: oklch(0.40 0.12 70);
    background: oklch(0.92 0.06 70 / 0.5);
}

.battery-state-inline.offline {
    color: oklch(0.45 0.15 25);
    background: oklch(0.92 0.06 25 / 0.5);
}


/* ===== History Toolbar ===== */
.history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.history-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.history-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

.history-toolbar-centered {
    justify-content: center;
}

.history-toolbar-centered .history-toolbar-left {
    flex-grow: 0;
}

/* kWh summary row above Dag overzicht chart */
.kwh-summary-row {
    display: flex;
    gap: 24px;
    padding: 10px 16px 2px;
}

.kwh-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kwh-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-foreground);
}

.kwh-summary-item.kwh-in .kwh-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #059669;
}

.kwh-summary-item.kwh-out .kwh-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #d97706;
}

.energy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.energy-badge.charged {
    color: #059669;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.energy-badge.discharged {
    color: #d97706;
    background: #fffaf0;
    border: 1px solid #fef3c7;
}

/* Energy-range card: badge colors aligned with the bar colors (in = red, out = green). */
.energy-badge.energy-in {
    color: oklch(0.637 0.208 25);
    background: oklch(0.637 0.208 25 / 0.10);
    border: 1px solid oklch(0.637 0.208 25 / 0.30);
}

.energy-badge.energy-out {
    color: oklch(0.70 0.15 152);
    background: oklch(0.70 0.15 152 / 0.12);
    border: 1px solid oklch(0.70 0.15 152 / 0.30);
}

.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    height: 28px;
}

.btn-icon.btn-xs {
    width: 28px;
    height: 28px;
    padding: 0;
}

/* ===== Compact Notifications ===== */
.notification-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid oklch(0.95 0.005 260);
}

.notification-compact:last-child {
    border-bottom: none;
}

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bg-green-500 { background: #22c55e; }
.bg-red-500 { background: #ef4444; }
.bg-blue-500 { background: #3b82f6; }

/* ===== Modules Grid (no empty slots) ===== */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* ===== Staggered Page Load Animation ===== */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-animate {
    animation: fadeSlideIn 300ms ease-out both;
}

.section-animate:nth-child(1) { animation-delay: 0ms; }
.section-animate:nth-child(2) { animation-delay: 60ms; }
.section-animate:nth-child(3) { animation-delay: 120ms; }
.section-animate:nth-child(4) { animation-delay: 180ms; }
.section-animate:nth-child(5) { animation-delay: 240ms; }
.section-animate:nth-child(6) { animation-delay: 300ms; }
.section-animate:nth-child(7) { animation-delay: 360ms; }
.section-animate:nth-child(8) { animation-delay: 420ms; }

/* ===== Chart Section Labels ===== */
.chart-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* ===== Realtime Card Live Breathing Border ===== */
@keyframes rtBorderPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0);
    }
    50% {
        box-shadow: 0 0 0 3px oklch(0.65 0.18 145 / 0.12);
    }
}

.rt-card-live {
    animation: rtBorderPulse 3s ease-in-out infinite;
    border-color: oklch(0.75 0.12 145 / 0.5);
}


/* ===== Empty Module Slot Cards ===== */
.empty-slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            oklch(0.96 0.005 260) 8px,
            oklch(0.96 0.005 260) 9px
        );
    opacity: 0.6;
}

.empty-slot-card svg {
    color: var(--muted-foreground);
    opacity: 0.4;
}

.empty-slot-card span {
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 500;
}

/* ===== Modal Fade-In Animation ===== */
@keyframes modalBackdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-backdrop {
    animation: modalBackdropFadeIn 200ms ease-out;
}

.modal-backdrop .modal {
    animation: modalSlideIn 200ms ease-out;
}

/* ===== OTA Progress Stepper ===== */
.ota-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
}

.ota-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
}

.ota-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--border);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.ota-step.completed .ota-step-dot {
    background: var(--online);
    border-color: var(--online);
    box-shadow: 0 0 0 3px oklch(0.65 0.18 145 / 0.15);
}

.ota-step.active .ota-step-dot {
    background: var(--primary);
    border-color: var(--primary-strong);
    box-shadow: 0 0 0 3px oklch(0.55 0.2 260 / 0.2);
    animation: otaPulse 2s ease-in-out infinite;
}

.ota-step.failed .ota-step-dot {
    background: var(--destructive);
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px oklch(0.55 0.2 25 / 0.15);
}

.ota-step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    margin-top: 6px;
    white-space: nowrap;
}

.ota-step.completed .ota-step-label { color: var(--online); }
.ota-step.active .ota-step-label { color: var(--primary-strong); font-weight: 700; }
.ota-step.failed .ota-step-label { color: var(--destructive); }

.ota-step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    min-width: 24px;
    transition: background 0.3s ease;
}

.ota-step-line.completed {
    background: var(--online);
}

@keyframes otaPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* OTA section on battery detail */
.ota-firmware-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.ota-firmware-row:last-child {
    border-bottom: none;
}

.ota-firmware-module {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ota-version-current {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

.ota-version-latest {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
}

.ota-version-latest.up-to-date {
    color: var(--online);
    background: oklch(0.92 0.06 145 / 0.5);
}

.ota-version-latest.outdated {
    color: var(--warning);
    background: oklch(0.92 0.06 70 / 0.5);
}

/* ===== Fleet Version Accordion ===== */
.fleet-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
}

.fleet-version-row:hover {
    background: var(--accent);
}

.fleet-version-row:last-of-type {
    border-bottom: none;
}

.fleet-version-chevron {
    color: var(--muted-foreground);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.fleet-version-row.expanded .fleet-version-chevron {
    transform: rotate(180deg);
    color: var(--primary-strong);
}

.fleet-devices-panel {
    margin: 0 -16px;
    padding: 0 16px 4px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    animation: fleetPanelSlide 150ms ease-out;
}

@keyframes fleetPanelSlide {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

.fleet-device-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px -8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s ease;
}

.fleet-device-item:hover {
    background: var(--card);
}

.fleet-device-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fleet-device-status.online {
    background: var(--online);
    box-shadow: 0 0 4px var(--online);
}

.fleet-device-status.offline {
    background: var(--muted-foreground);
    opacity: 0.5;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    .status-bar {
        gap: 8px;
        padding: 8px 12px;
    }

    .status-bar-sep {
        display: none;
    }

    .status-bar-item {
        flex: 0 0 auto;
    }

    .status-bar-time {
        width: 100%;
        margin-left: 0;
        padding-top: 4px;
        border-top: 1px solid var(--border);
    }

    .history-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .history-toolbar-left,
    .history-toolbar-right {
        width: 100%;
    }

    .history-toolbar-right {
        justify-content: flex-start;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .status-bar-label {
        display: none;
    }

    .status-bar {
        gap: 6px;
    }
}

/* ===== Login Page — Inline Style Cleanup ===== */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background: white;
}

.login-card.test-offset {
    margin-top: 40px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    display: inline-flex;
    height: 120px;
    width: 120px;
    align-items: center;
    justify-content: center;
    background: var(--brand-green);
    color: white;
    margin-bottom: 24px;
    border-radius: 16px;
}

.login-logo svg {
    width: 60px;
    height: 54px;
    min-width: 60px;
    min-height: 54px;
}

.login-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--brand-green-dark);
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}

.login-subtitle {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    margin-bottom: 0;
}

.login-error {
    background: #FFF5F5;
    color: #E53E3E;
    padding: 12px;
    border: 1px solid #FED7D7;
    font-size: 14px;
    margin-bottom: 16px;
}

.login-success {
    background: #F0FBF0;
    color: #2E882A;
    padding: 12px;
    border: 1px solid #C6EFC4;
    font-size: 14px;
    margin-bottom: 16px;
}

.login-links {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

.login-links a {
    color: var(--brand-green-dark);
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #666;
}

.login-field {
    margin-bottom: 20px;
}

.login-field:last-of-type {
    margin-bottom: 24px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.required-star {
    color: var(--brand-green-dark);
}

.login-input {
    width: 100%;
    height: 44px;
    border: 1px solid #CCC;
    padding: 0 12px;
    font-size: 15px;
}

.password-wrapper {
    position: relative;
}

.password-wrapper .login-input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0;
}

.password-toggle:hover {
    color: #555;
}

.login-submit {
    width: 100%;
    height: 48px;
    font-size: 18px;
}

/* ===== Test Environment Banner ===== */
.test-banner {
    background: var(--test-orange);
    color: white;
    text-align: center;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.test-banner.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.test-banner.in-sidebar {
    padding: 6px 0;
    font-size: 11px;
    box-shadow: none;
}

/* ===== Sidebar — Inline Style Cleanup ===== */
.sidebar-header {
    display: flex;
    height: auto;
    align-items: center;
    padding: 0;
    background: var(--brand-green);
    border-bottom: none;
}

.sidebar-logo-container {
    background: transparent;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.sidebar-title-container {
    flex: 1;
    background: transparent;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.sidebar-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    font-size: 24px;
    font-weight: 400;
}

/* ===== RMQ/MQTT Badges ===== */
.badge-rmq {
    background: #f59e0b;
    color: white;
    font-size: 10px;
}

.badge-mqtt {
    background: #3b82f6;
    color: white;
    font-size: 10px;
}

.badge-vendor-budgetthuis {
    background: var(--brand-green);
    color: #000000;
    font-size: 10px;
}

.badge-vendor-smartgateways {
    background: #f59e0b;
    color: white;
    font-size: 10px;
}

/* ===== Card Variants ===== */
.card-content-compact {
    padding: 12px 16px;
}

.card-content-flush {
    padding: 8px 16px;
}

.card-header-compact {
    padding: 12px 16px;
}

.card-error {
    border-color: var(--destructive);
}

/* ===== Spinner Small ===== */
.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border: 2px solid var(--border);
    border-top: 2px solid var(--primary-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ===== Fleet Health Summary ===== */
.fleet-health {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.fleet-health-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fleet-health.healthy {
    background: rgba(0, 215, 128, 0.1);
    border: 1px solid rgba(0, 215, 128, 0.3);
    color: var(--foreground);
}

.fleet-health.healthy .fleet-health-icon {
    background: rgba(0, 215, 128, 0.2);
    color: var(--online);
}

.fleet-health.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--foreground);
}

.fleet-health.warning .fleet-health-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.fleet-health.critical {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--foreground);
}

.fleet-health.critical .fleet-health-icon {
    background: rgba(239, 68, 68, 0.2);
    color: var(--destructive);
}

.fleet-health-text {
    flex: 1;
}

.fleet-health-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.fleet-health-stat {
    white-space: nowrap;
}

.fleet-health-stat strong {
    font-weight: 600;
    color: var(--foreground);
}

/* ===== Empty State ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-state svg {
    margin-bottom: 16px;
    color: var(--muted-foreground);
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--foreground);
}

.empty-state p {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    max-width: 400px;
}

.empty-state p + p {
    margin-top: 8px;
}

/* ===== Skeleton Loading ===== */
.skeleton-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 16px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.skeleton-row:last-child {
    border-bottom: none;
}

.skeleton-text {
    height: 14px;
    border-radius: 4px;
    background: var(--muted);
    animation: pulse 2s ease-in-out infinite;
}

.skeleton-text.w-20 { width: 80px; }
.skeleton-text.w-24 { width: 96px; }
.skeleton-text.w-32 { width: 128px; }
.skeleton-text.w-40 { width: 160px; }
.skeleton-text.w-48 { width: 192px; }
.skeleton-text.w-full { width: 100%; }
.skeleton-text.h-8 { height: 32px; }
.skeleton-text.h-6 { height: 24px; }

.skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--muted);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ===== Table Responsive ===== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-responsive .table {
        min-width: 800px;
    }
}

/* Table row hover chevron */
.table tr {
    position: relative;
}

.table tbody tr::after {
    content: '\203A';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--muted-foreground);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.table tbody tr:hover::after {
    opacity: 0.6;
}

/* Table keyboard focus */
.table tbody tr:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

/* ===== Firmware Empty State Padding ===== */
.firmware-empty {
    padding: 48px;
    text-align: center;
}

/* ===== Toast Notifications ===== */
.toast-container {
    position: fixed;
    top: 76px;
    right: var(--space-6);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    min-width: 300px;
    max-width: 420px;
    pointer-events: auto;
    animation: toastSlideIn var(--duration-slow) ease forwards;
}

.toast-icon {
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--foreground);
}

.toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}

.toast-close:hover {
    background: var(--muted);
    color: var(--foreground);
}

.toast-success {
    border-left: 3px solid var(--online);
}

.toast-success .toast-icon {
    color: var(--online);
}

.toast-error {
    border-left: 3px solid var(--destructive);
}

.toast-error .toast-icon {
    color: var(--destructive);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-warning .toast-icon {
    color: var(--warning);
}

.toast-info {
    border-left: 3px solid var(--info);
}

.toast-info .toast-icon {
    color: var(--info);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Confirmation Dialog ===== */
.confirm-dialog {
    overflow: visible;
}

.confirm-dialog-body {
    padding: var(--space-6);
    text-align: center;
}

.confirm-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.confirm-dialog-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 var(--space-2);
}

.confirm-dialog-message {
    font-size: var(--text-base);
    color: var(--muted-foreground);
    margin: 0 0 var(--space-6);
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.confirm-dialog-actions .btn {
    min-width: 120px;
}

/* ===== Destructive Button ===== */
.btn-destructive {
    background: var(--destructive);
    color: var(--destructive-foreground);
    border: none;
}

.btn-destructive:hover {
    background: #DC2626;
}

.btn-destructive:active {
    background: #B91C1C;
}

/* ===== Admin Dashboard Grid ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.compact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.compact-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.compact-stat-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.soc-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--muted);
    overflow: hidden;
}

.soc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ===== Attention Table ===== */
.attention-table {
    width: 100%;
    border-collapse: collapse;
}

.attention-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.attention-table th button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.attention-table th button:hover {
    color: var(--foreground);
}

.attention-row {
    transition: background 0.15s ease;
}

.attention-row:hover {
    background: var(--muted);
}

.attention-row td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.attention-row:last-child td {
    border-bottom: none;
}

.attention-icon-cell {
    width: 32px;
    text-align: center;
}

.attention-row.error .attention-icon-cell {
    color: var(--destructive);
}

.attention-row.warning .attention-icon-cell {
    color: var(--warning);
}

.attention-arrow {
    width: 24px;
    color: var(--muted-foreground);
    text-align: center;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Table Fault Row ===== */
.fault-row {
    background: rgba(239, 68, 68, 0.05);
}

.fault-row:hover {
    background: rgba(239, 68, 68, 0.10) !important;
}

/* ===== Stale / Offline Row ===== */
.stale-row,
.stale-row-p1 {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(128, 128, 128, 0.06) 4px,
        rgba(128, 128, 128, 0.06) 8px
    ) !important;
}

/* Batteries: keep Status + Serienummer crisp, fade the rest */
.stale-row td:nth-child(-n+2) {
    background: var(--background);
}
.stale-row td:nth-child(n+3) {
    opacity: 0.25;
    color: var(--muted-foreground);
}

/* P1 Meters: keep Status + ID crisp, fade the rest */
.stale-row-p1 td:nth-child(-n+2) {
    background: var(--background);
}
.stale-row-p1 td:nth-child(n+3) {
    opacity: 0.25;
    color: var(--muted-foreground);
}

/* ===== SOC Mini Bar (inline in table) ===== */
.soc-mini-bar {
    width: 40px;
    height: 6px;
    border-radius: 3px;
    background: var(--muted);
    overflow: hidden;
    flex-shrink: 0;
}

.soc-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ===== Impersonation Banner ===== */
.impersonation-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: #FEF3C7;
    border-bottom: 1px solid #F59E0B;
    color: #92400E;
    font-size: 14px;
}

.impersonation-banner svg {
    flex-shrink: 0;
}

.impersonation-banner strong {
    color: #78350F;
}

.btn-impersonation-end {
    margin-left: auto;
    padding: 4px 14px;
    border-radius: 6px;
    border: 1px solid #D97706;
    background: #FFFBEB;
    color: #92400E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-impersonation-end:hover {
    background: #FDE68A;
    border-color: #B45309;
}

/* PWA Install Banner */
.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-green);
    color: #000000;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 215, 128, 0.3);
}

.pwa-install-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
}

.pwa-install-text strong {
    font-size: 14px;
}

/* Install banner button uses .btn .btn-sm .btn-dark (black on green, guidelines p48) */

.pwa-install-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pwa-install-dismiss:hover {
    color: white;
}

/* PWA Install Page */
.install-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
    padding: 20px;
}

.install-card {
    width: 100%;
    max-width: 420px;
    padding: 48px 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.install-card.test-offset {
    margin-top: 40px;
}

.install-header {
    text-align: center;
    margin-bottom: 32px;
}

.install-app-icon {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.install-title {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--brand-green-dark);
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}

.install-subtitle {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
    margin-bottom: 0;
}

.install-body {
    text-align: center;
}

.install-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.install-success p {
    margin: 0;
    font-size: 16px;
}

.install-steps {
    margin-bottom: 24px;
}

.install-instruction {
    font-size: 15px;
    color: #333;
    margin: 0 0 20px;
    line-height: 1.5;
}

.install-ios-steps {
    text-align: left;
    padding-left: 20px;
    margin: 0 0 20px;
}

.install-ios-steps li {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* What the app has that the web version does not. */
.install-features-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: -8px 0 6px;
}

.install-features {
    display: inline-block;
    text-align: left;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    padding-left: 20px;
    margin: 0 0 20px;
}

/* Official store badges: same height, unaltered artwork (Apple ≥ 40px on screen). */
.install-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.install-badge {
    display: inline-block;
    line-height: 0;
}

.install-badge img {
    display: block;
    height: 48px;
    width: auto;
}

.install-hint {
    font-size: 13px;
    color: #888;
    margin: 8px 0 0;
}

/* ===== Bottom Navigation Bar (Liquid Glass) ===== */
.bottom-nav {
    --glass-bg: rgba(180, 180, 185, 0.18);
    --glass-blur: 20px;
    --glass-sat: 180%;
    --glass-light: #fff;
    --glass-dark: #000;
    position: fixed;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 60px;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-radius: 99em;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--glass-light) 12%, transparent),
        inset 1.5px 2.5px 0px -1.5px color-mix(in srgb, var(--glass-light) 70%, transparent),
        inset -1.5px -1.5px 0px -1.5px color-mix(in srgb, var(--glass-light) 50%, transparent),
        inset -2px -6px 1px -4px color-mix(in srgb, var(--glass-light) 30%, transparent),
        inset -0.3px -1px 3px 0px color-mix(in srgb, var(--glass-dark) 10%, transparent),
        inset -1px 2px 0px -1.5px color-mix(in srgb, var(--glass-dark) 15%, transparent),
        inset 0px 2.5px 3px -1.5px color-mix(in srgb, var(--glass-dark) 12%, transparent),
        0px 1px 4px 0px color-mix(in srgb, var(--glass-dark) 8%, transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) 6%, transparent);
    display: none;
    align-items: center;
    justify-content: space-evenly;
    z-index: 100;
    padding: 0 12px;
}

.bottom-nav-item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 99em;
    text-decoration: none;
    color: color-mix(in srgb, var(--foreground) 50%, transparent);
    transition: color 200ms cubic-bezier(0.5, 0, 0, 1), transform 200ms cubic-bezier(0.5, 0, 0, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Replace the browser's default (blue) focus ring with a brand one,
   visible only for keyboard navigation. */
.bottom-nav-item:focus {
    outline: none;
}

.bottom-nav-item:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.bottom-nav-item svg {
    width: 22px;
    height: 22px;
    transition: transform 200ms cubic-bezier(0.5, 0, 0, 1);
}

.bottom-nav-item.active {
    color: var(--brand-green-dark);
    background-color: color-mix(in srgb, var(--glass-light) 28%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--glass-light) 15%, transparent),
        inset 1px 1.5px 0px -0.5px color-mix(in srgb, var(--glass-light) 70%, transparent),
        inset -1px -1px 0px -0.5px color-mix(in srgb, var(--glass-light) 40%, transparent),
        inset -1px -4px 1px -3px color-mix(in srgb, var(--glass-light) 25%, transparent),
        inset -1px 1.5px 2px -1px color-mix(in srgb, var(--glass-dark) 12%, transparent),
        0px 2px 5px 0px color-mix(in srgb, var(--glass-dark) 6%, transparent);
}

.bottom-nav-item.active svg {
    transform: scale(1.1);
}

.bottom-nav-icon-wrap {
    position: relative;
    display: flex;
}

.bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    background: var(--destructive);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ===== Branded Customer Header ===== */
.header-brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-brand-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--foreground);
    letter-spacing: 0.5px;
}

/* ===== Notifications Empty State ===== */
.empty-state-ok {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-ok-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 215, 128, 0.1);
    color: var(--brand-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-state-ok-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.empty-state-ok-sub {
    font-size: 14px;
    color: var(--muted-foreground);
    max-width: 260px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ===== Customer Notification Cards ===== */
.notif-customer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    position: relative;
    overflow: hidden;
}

.notif-card:active {
    transform: scale(0.985);
}

.notif-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.notif-card.error .notif-card-accent {
    background: var(--destructive);
}

.notif-card.warning .notif-card-accent {
    background: var(--warning);
}

.notif-card.info .notif-card-accent {
    background: var(--primary);
}

.notif-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-card-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--destructive);
}

.notif-card-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notif-card-icon.info {
    background: rgba(0, 183, 255, 0.1);
    color: var(--info);
}

.notif-card-body {
    flex: 1;
    min-width: 0;
}

.notif-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 2px;
}

.notif-card-msg {
    font-size: 12.5px;
    color: var(--muted-foreground);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-card-time {
    font-size: 11px;
    color: var(--muted-foreground);
    margin-top: 4px;
    opacity: 0.7;
}

.notif-card-sn {
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

.notif-card-time-sep {
    margin: 0 6px;
    opacity: 0.5;
}

.notif-card-chevron {
    color: var(--muted-foreground);
    opacity: 0.3;
    flex-shrink: 0;
}

/* ===== Profile Page ===== */
.profile-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 440px;
    margin: 0 auto;
    padding: 8px 0;
}

.profile-header-card {
    width: 100%;
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 20px 20px;
    text-align: center;
    margin-bottom: 16px;
    overflow: hidden;
}

.profile-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #000000 0%, var(--brand-green-dark) 100%);
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    border: 3px solid var(--card);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.profile-initials {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1px;
}

.profile-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 2px;
}

.profile-email {
    font-size: 13px;
    color: var(--muted-foreground);
}

.profile-alert {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
}

.profile-alert.error {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

.profile-alert.success {
    background: #efe;
    border: 1px solid #cfc;
    color: #363;
}

.profile-logout {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    color: var(--destructive);
    border-color: var(--destructive);
}

.profile-logout:hover {
    background: var(--destructive);
    color: white;
}

/* ===== Battery Info Page ===== */
.battery-info-page {
    max-width: 500px;
    margin: 0 auto;
    padding: 8px 0;
}

.info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.info-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
}

.info-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-strong);
}

.info-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
}

.info-card-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-foreground);
    padding: 12px 16px 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
}

.info-row:first-of-type {
    border-top: none;
}

.info-label {
    font-size: 14px;
    color: var(--muted-foreground);
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    text-align: right;
}

.manual-download-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--foreground);
    border-top: 1px solid var(--border);
    transition: background 0.15s ease;
}

.manual-download-btn:hover {
    background: var(--muted);
}

.manual-download-btn svg:first-child {
    color: var(--primary-strong);
    flex-shrink: 0;
}

.manual-download-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.manual-download-sub {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
}

/* Battery detail: info link button */
.battery-info-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.battery-info-link:hover {
    background: var(--muted);
}

/* ===== Mobile App Shell ===== */

/* Prevent horizontal scroll globally */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

/* Hide scrollbar for customer mobile view */
.customer-view .page-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.customer-view .page-content::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {

    /* ── Customer mobile: full app shell ── */
    .customer-view .sidebar {
        display: none !important;
    }

    .customer-view > .main-content {
        margin-left: 0 !important;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* Fixed header — stays pinned even during iOS overscroll bounce */
    .customer-view .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        height: 44px;
        padding: 0 16px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border);
        background: var(--card);
    }

    /* Impersonation: pin banner above header, push header down, add page padding */
    .customer-view.impersonating .impersonation-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 91;
        height: 40px;
        padding: 8px 16px;
        font-size: 13px;
    }

    .customer-view.impersonating .header {
        top: 40px;
    }

    .customer-view.impersonating .page-content {
        padding-top: 96px;
    }

    .customer-view .header-title-section h1 {
        font-size: 17px;
        font-family: var(--font-body);
        letter-spacing: 0;
        text-transform: none;
        font-weight: 600;
    }

    .customer-view .header-title-section p,
    .customer-view .header-search,
    .customer-view .header-avatar {
        display: none;
    }

    /* Bottom nav */
    .customer-view .bottom-nav {
        display: flex !important;
    }

    /* Page content: proper spacing (top = 44px header + 12px gap) */
    .customer-view .page-content {
        flex: 1;
        padding: 56px 16px 80px;
        overflow-x: hidden;
        background: var(--background);
    }

    /* BTB-103: the sticky chat composer must sit above the fixed bottom nav (60px + 2px, z-index 100) */
    .customer-view .chat-composer {
        bottom: calc(64px + env(safe-area-inset-bottom));
        z-index: 10;
    }

    /* Hide device info bar + back button */
    .customer-view .device-info-bar {
        display: none !important;
    }

    .customer-view .btn-ghost.btn-sm.text-muted {
        display: none;
    }

    /* ── Status bar: hidden for customer (uses bat-hero instead) ── */
    .customer-view .status-bar {
        display: none !important;
    }

    /* ── Section labels ── */
    .customer-view .chart-section-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--foreground);
        text-transform: none;
        letter-spacing: 0;
        margin-bottom: 8px;
        margin-top: 4px;
    }

    /* ── Spacing ── */
    .customer-view .mb-6 {
        margin-bottom: 12px !important;
    }

    /* ── Swap chart order: Dag overzicht first, Realtime below ── */
    .customer-view .chart-section-history {
        order: 1;
    }

    .customer-view .chart-section-realtime {
        order: 2;
    }

    /* ── Realtime chart: compact for customers ── */
    .customer-view .rt-chart-area {
        height: 180px;
        min-height: 180px;
    }

    .customer-view .rt-inner {
        padding: 0;
    }

    .customer-view .rt-chart-area canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* ── Day chart ── */
    .customer-view .chart-container {
        height: 280px;
        min-height: 280px;
        padding: 8px 0;
    }

    /* ── History toolbar: compact horizontal scroll ── */
    .customer-view .history-toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        padding: 10px 12px;
        align-items: center;
        justify-content: space-between;
    }

    .customer-view .history-toolbar-left {
        display: flex;
        flex-direction: row;
        gap: 3px;
        align-items: center;
    }

    .customer-view .history-toolbar-left .flex.items-center.gap-2 > * {
        flex-shrink: 0;
    }

    .customer-view .history-toolbar-sep {
        display: none;
    }

    .customer-view .history-toolbar-right {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-left: auto;
    }

    .customer-view .history-toolbar-right .energy-badge {
        font-size: 10px;
        padding: 2px 5px;
        gap: 2px;
        border-width: 1px;
    }

    .customer-view .history-toolbar-right .energy-badge svg {
        width: 9px;
        height: 9px;
    }

    /* Compact buttons in toolbar */
    .customer-view .history-toolbar .btn-xs,
    .customer-view .history-toolbar .btn-sm {
        padding: 3px 5px;
        font-size: 11px;
    }

    .customer-view .history-toolbar .date-picker {
        font-size: 12px;
        padding: 3px 5px;
        width: 100px;
    }

    .customer-view .history-toolbar .btn-outline.btn-icon.btn-sm {
        padding: 3px;
        height: 26px;
        width: 26px;
    }

    /* ── Cards: clean mobile look ── */
    .customer-view .card {
        border-radius: var(--radius-lg);
        box-shadow: none;
        border: 1px solid var(--border);
    }

    .customer-view .card-content {
        padding: 8px 4px;
    }

    /* ── Battery info link ── */
    .customer-view .battery-info-link {
        border-radius: var(--radius-lg);
        padding: 12px 16px;
        font-size: 13px;
    }

    /* ── General mobile (all users) ── */
    .page-content {
        padding-left: 16px;
        padding-right: 16px;
        overflow-x: hidden;
    }

    /* Notifications: mobile-friendly */
    .notification-row {
        flex-direction: column;
        gap: 8px;
    }

    .notification-meta {
        flex-direction: row;
        gap: 8px;
    }

    /* Notifications page: constrain width */
    .customer-view .card,
    .customer-view .card-header,
    .customer-view .card-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .customer-view .card-header .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    .customer-view .card-header .badge {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ===== PWA standalone mode ===== */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }

    /* Fixed header needs to clear the notch/dynamic island */
    .customer-view .header {
        top: env(safe-area-inset-top);
    }

    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* ===== Chart section ordering ===== */
.chart-sections {
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.chart-sections *,
.chart-sections *::before,
.chart-sections *::after {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.chart-section-realtime {
    order: 1;
}

.chart-section-history {
    order: 2;
}

/* ===== Battery Hero Card (customer view) ===== */
.bat-hero {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
    overflow: hidden;
}

/* Single row: status left, flow right */
.bat-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 10px;
}

.bat-hero-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bat-hero-state.charging { background: rgba(0, 215, 128, 0.1); color: var(--brand-green-dark); }
.bat-hero-state.discharging { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.bat-hero-state.idle { background: var(--muted); color: var(--muted-foreground); }
.bat-hero-state.offline { background: rgba(239, 68, 68, 0.08); color: var(--destructive); }

/* Energy flow: socket → dots → battery → % (inline) */
.bat-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bat-flow-socket {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.7;
}

.bat-flow-track {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    gap: 6px;
}

.bat-flow-line {
    width: 100%;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}

.bat-flow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-green);
    opacity: 0.3;
    display: block;
}

.bat-flow-track.charging .bat-flow-dot {
    animation: flow-right 1.2s ease-in-out infinite;
}
.bat-flow-track.charging .bat-flow-dot:nth-child(1) { animation-delay: 0s; }
.bat-flow-track.charging .bat-flow-dot:nth-child(2) { animation-delay: 0.25s; }
.bat-flow-track.charging .bat-flow-dot:nth-child(3) { animation-delay: 0.5s; }

@keyframes flow-right {
    0% { opacity: 0.15; transform: translateX(-4px) scale(0.7); }
    50% { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0.15; transform: translateX(4px) scale(0.7); }
}

.bat-flow-track.discharging .bat-flow-dot {
    background: var(--warning);
    animation: flow-left 1.2s ease-in-out infinite;
}
.bat-flow-track.discharging .bat-flow-dot:nth-child(1) { animation-delay: 0.5s; }
.bat-flow-track.discharging .bat-flow-dot:nth-child(2) { animation-delay: 0.25s; }
.bat-flow-track.discharging .bat-flow-dot:nth-child(3) { animation-delay: 0s; }

@keyframes flow-left {
    0% { opacity: 0.15; transform: translateX(4px) scale(0.7); }
    50% { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0.15; transform: translateX(-4px) scale(0.7); }
}

/* Horizontal battery (iPhone style) */
.bat-flow-battery {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bat-flow-bat-shell {
    width: 32px;
    height: 16px;
    border: 2px solid var(--foreground);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    background: var(--muted);
}

.bat-flow-battery.charging .bat-flow-bat-shell { border-color: var(--brand-green-dark); }
.bat-flow-battery.discharging .bat-flow-bat-shell { border-color: var(--warning); }

.bat-flow-bat-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--brand-green);
    transition: width 1s ease;
    border-radius: 1px;
}

.bat-flow-battery.charging .bat-flow-bat-fill { animation: bat-pulse 2s ease-in-out infinite; }
.bat-flow-battery.discharging .bat-flow-bat-fill { background: var(--warning); }
.bat-flow-battery.offline .bat-flow-bat-fill { background: var(--muted-foreground); }

/* SOC level colors: orange <10%, red <5% */
.bat-flow-battery.low .bat-flow-bat-fill { background: #F97316; }
.bat-flow-battery.low .bat-flow-bat-shell { border-color: #F97316; }
.bat-flow-battery.low .bat-flow-bat-nub { background: #F97316; }

.bat-flow-battery.critical .bat-flow-bat-fill { background: var(--destructive); }
.bat-flow-battery.critical .bat-flow-bat-shell { border-color: var(--destructive); }
.bat-flow-battery.critical .bat-flow-bat-nub { background: var(--destructive); }

@keyframes bat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.bat-flow-bat-nub {
    width: 2px;
    height: 7px;
    background: var(--foreground);
    border-radius: 0 2px 2px 0;
    margin-left: -1px;
}

.bat-flow-battery.charging .bat-flow-bat-nub { background: var(--brand-green); }
.bat-flow-battery.discharging .bat-flow-bat-nub { background: var(--warning); }

.bat-flow-bat-pct {
    font-size: 16px;
    font-weight: 800;
    color: var(--foreground);
    margin-left: 4px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* Timestamp footer */
.bat-hero-time {
    padding: 6px 14px 7px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted-foreground);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ===== WiFi signal indicator ===== */
.wifi-signal-wrap {
    position: relative;
    display: inline-flex;
}

.wifi-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: color-mix(in srgb, var(--foreground) 22%, transparent);
}

.wifi-signal:hover {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

/* Bucket colors apply to the active (lit) arcs */
.wifi-signal-uitstekend { color: var(--brand-green-dark); }
.wifi-signal-goed { color: #eab308; }
.wifi-signal-matig { color: #f97316; }
.wifi-signal-zwak { color: var(--destructive, #ef4444); }

/* Default: all parts dimmed; bucket selectors below light them progressively */
.wifi-signal .wifi-arc,
.wifi-signal .wifi-dot {
    opacity: 0.22;
    transition: opacity 0.2s ease;
}

/* Zwak: only the dot is lit */
.wifi-signal-zwak .wifi-dot { opacity: 1; }

/* Matig: dot + innermost arc */
.wifi-signal-matig .wifi-dot,
.wifi-signal-matig .wifi-arc-1 { opacity: 1; }

/* Goed: dot + arc 1 + arc 2 */
.wifi-signal-goed .wifi-dot,
.wifi-signal-goed .wifi-arc-1,
.wifi-signal-goed .wifi-arc-2 { opacity: 1; }

/* Uitstekend: everything */
.wifi-signal-uitstekend .wifi-dot,
.wifi-signal-uitstekend .wifi-arc-1,
.wifi-signal-uitstekend .wifi-arc-2,
.wifi-signal-uitstekend .wifi-arc-3 { opacity: 1; }

/* Bottom sheet (mobile-first; centered on wider screens) */
.wifi-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.45);
    animation: wifi-fade-in 0.2s ease-out both;
}

.wifi-sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    background: var(--card);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    padding: max(16px, env(safe-area-inset-top)) 20px 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    color: var(--foreground);
    text-align: left;
    animation: wifi-sheet-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.wifi-sheet-handle {
    width: 40px;
    height: 4px;
    background: color-mix(in srgb, var(--foreground) 18%, transparent);
    border-radius: 2px;
    margin: 16px auto 0;
}

.wifi-sheet-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.wifi-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    flex-shrink: 0;
}

.wifi-sheet-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wifi-sheet-label {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.wifi-sheet-subtitle {
    font-size: 12px;
    color: var(--muted-foreground);
}

.wifi-sheet-close {
    background: transparent;
    border: 0;
    padding: 6px;
    border-radius: 8px;
    color: var(--muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
}

.wifi-sheet-close:hover {
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.wifi-sheet-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--foreground);
}

.wifi-sheet-advice {
    margin: 0;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
    border-radius: 10px;
    color: var(--foreground);
    font-size: 13px;
    line-height: 1.5;
}

.wifi-popover-label-uitstekend { color: var(--brand-green-dark); }
.wifi-popover-label-goed { color: #eab308; }
.wifi-popover-label-matig { color: #f97316; }
.wifi-popover-label-zwak { color: var(--destructive, #ef4444); }

@keyframes wifi-sheet-in {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes wifi-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* On wider screens, render as a centered card instead of a bottom sheet */
@media (min-width: 640px) {
    .wifi-sheet {
        left: 50%;
        right: auto;
        bottom: 50%;
        transform: translate(-50%, 50%);
        max-width: 380px;
        width: calc(100% - 32px);
        border-radius: 16px;
        animation: wifi-modal-in 0.2s ease-out both;
    }

    .wifi-sheet-handle { display: none; }

    @keyframes wifi-modal-in {
        from { opacity: 0; transform: translate(-50%, calc(50% + 8px)); }
        to { opacity: 1; transform: translate(-50%, 50%); }
    }
}

/* ===== Customer landscape block ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .customer-view .page-content,
    .customer-view .header,
    .customer-view .bottom-nav {
        display: none !important;
    }

    .customer-view::after {
        content: "Draai uw telefoon naar portrait-modus";
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--background);
        color: var(--foreground);
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        padding: 24px;
    }
}

/* ===== Feedback Page ===== */
.feedback-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 540px;
    margin: 0 auto;
}

/* BTB-103 (2026-10-05): outlined klantenservice card on the battery page (was the BTB-137 website-chat card). */
.support-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 8px;
    padding: 16px;
    background: var(--card);
    border: 1.5px solid var(--brand-green-dark);
    border-radius: var(--radius-lg);
    color: var(--foreground);
}

.support-card-text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.support-card-title {
    font-size: 16px;
    font-weight: 600;
}

.support-card-sub {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.support-card-btn {
    align-self: flex-start;
    margin-top: 10px;
}

.feedback-page .feedback-help-card {
    margin-bottom: var(--space-4);
}

.feedback-page .card {
    width: 100%;
}

.feedback-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.feedback-textarea {
    height: auto !important;
    min-height: 140px;
    padding: 12px !important;
    resize: vertical;
    line-height: 1.5;
    font-size: 14px;
}

.feedback-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Width modifier only — all visual styling comes from .btn/.btn-primary */
.feedback-submit-btn {
    width: 100%;
}

.feedback-success {
    text-align: center;
    padding: 24px 8px;
}

.feedback-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 215, 128, 0.1);
    margin-bottom: 16px;
}

.feedback-success-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.feedback-error {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    color: #dc2626;
    font-size: 14px;
}

/* ===== Link Battery (customer self-service onboarding) ===== */
.link-battery-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
}

.link-battery-card {
    width: 100%;
    overflow: hidden;
}

.link-battery-hero {
    text-align: center;
    padding: 36px 24px 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-green) 8%, transparent) 0%, transparent 100%);
}

.link-battery-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--brand-green) 14%, transparent);
    color: var(--brand-green-dark);
    margin-bottom: 18px;
}

.link-battery-hero-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--foreground);
    margin: 0 0 8px;
}

.link-battery-hero-text {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 auto;
    max-width: 340px;
    line-height: 1.55;
}

.link-battery-form {
    padding: 24px;
}

.link-battery-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.link-battery-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.link-battery-input {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    height: 48px;
    padding: 0 14px;
}

/* Ghost hint: real serial prefix + masked tail, shown while the field is empty.
   A styled overlay instead of ::placeholder so the prefix and dots can differ. */
.link-battery-input-wrap {
    position: relative;
}

.link-battery-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 1.5px;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.link-battery-ghost.is-hidden {
    opacity: 0;
}

.link-battery-input:focus ~ .link-battery-ghost {
    opacity: 0.55;
}

.link-battery-input:focus ~ .link-battery-ghost.is-hidden {
    opacity: 0;
}

.link-battery-ghost-prefix {
    color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.link-battery-ghost-dots {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--muted-foreground) 60%, transparent),
        color-mix(in srgb, var(--muted-foreground) 18%, transparent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.link-battery-cta {
    height: 48px;
}

.link-battery-hint {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
    line-height: 1.5;
}

/* Success state */
.link-battery-success {
    text-align: center;
    padding: 40px 24px;
}

.link-battery-success .link-battery-cta {
    margin-top: 28px;
}

.link-battery-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-green) 15%, transparent);
    color: var(--brand-green-dark);
    margin-bottom: 20px;
    animation: link-battery-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.link-battery-success-icon svg {
    animation: link-battery-check 0.5s ease-out 0.15s both;
}

.link-battery-serial {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: 0.5px;
}

@keyframes link-battery-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes link-battery-check {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Charge-mode (Laadmodus) picker — BTB-79 ===== */

/* Screen-reader-only: visually hidden but still announced by assistive tech */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Device-detail clickable settings row that opens the picker */
.settings-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.settings-link-row:first-of-type {
    border-top: none;
}

.settings-link-row:hover {
    background: var(--muted);
}

.settings-link-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.settings-link-value svg {
    color: var(--muted-foreground);
}

/* Bottom-sheet picker */
.cmode-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    animation: cmode-fade-in 0.2s ease-out both;
}

.cmode-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
    padding: 0 16px max(16px, env(safe-area-inset-bottom));
    color: var(--foreground);
    animation: cmode-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.cmode-handle {
    width: 40px;
    height: 4px;
    background: color-mix(in srgb, var(--foreground) 18%, transparent);
    border-radius: 2px;
    margin: 10px auto 16px;
}

.cmode-intro {
    background: var(--secondary);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.cmode-intro-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-foreground);
}

.cmode-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmode-option {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: var(--card);
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.cmode-option.is-selected {
    /* Active mode — highlighted like the mockup. 2px border, padding trimmed 1px to hold size. */
    border: 2px solid var(--brand-green);
    padding: 15px;
}

.cmode-option.is-disabled {
    /* Other modes are greyed-out placeholders (not yet customer-switchable). */
    opacity: 0.5;
}

.cmode-option-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.cmode-option-title {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.25;
}

.cmode-option-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cmode-recommended {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-green) 14%, transparent);
    color: var(--brand-green-dark);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cmode-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--foreground) 30%, transparent);
    color: #fff;
    flex-shrink: 0;
}

.cmode-radio.is-checked {
    background: var(--brand-green);
    border-color: var(--brand-green-dark);
}

.cmode-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmode-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--muted-foreground);
}

.cmode-bullet svg {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.cmode-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
}

.cmode-save {
    width: 100%;
}

.cmode-cancel {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--foreground);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cmode-cancel:hover {
    background: var(--muted);
}

@keyframes cmode-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cmode-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ===== Fault Code Filter Drawer ===== */
.faultcode-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 60;
    animation: modalBackdropFadeIn 200ms ease-out;
}

.faultcode-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100vw;
    background: var(--card);
    box-shadow: var(--shadow-xl);
    z-index: 61;
    display: flex;
    flex-direction: column;
    animation: faultcodeDrawerSlideIn 200ms ease-out;
}

@keyframes faultcodeDrawerSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.faultcode-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.faultcode-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.faultcode-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faultcode-drawer-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.faultcode-drawer-item:hover {
    background: var(--muted);
}

.faultcode-drawer-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.faultcode-drawer-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border);
}


/* ===== Customer P1 meter (iOS parity) ===== */
/* Owner: Customer/CustomerP1MeterDetail.razor + Customer/P1WeekEnergyCard.razor.
   Ported from the native "Meter" tab; the hero mirrors the .bat-hero family. */

/* iOS light palette (BT.power / accentDeep / phase colors) as tokens — appended here
   rather than merged into the main :root block above so this section stays self-contained. */
:root {
    --p1-import: #E8833A;
    --p1-export: #17915A;
    --p1-phase-l1: #2BB673;
    --p1-phase-l2: #2F80ED;
    --p1-phase-l3: #C65BC9;
}

/* ── Hero card ── */
/* No transform/animation here on purpose: it would create a containing block and trap the
   money popover's position:fixed backdrop (same trade-off as .bat-hero). */
.p1-hero {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
}

.p1-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 0;
}

.p1-hero-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.p1-hero-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground);
}

.p1-hero-vendor {
    font-size: 12px;
    color: var(--muted-foreground);
}

.p1-hero-vendor-solo {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-foreground);
}

.p1-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.p1-hero-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.p1-hero-pill.online {
    color: var(--online);
    background: color-mix(in srgb, var(--online) 12%, transparent);
}

.p1-hero-pill.offline {
    color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 10%, transparent);
}

/* Two headline stats of equal weight: live power (left), live money (right). */
.p1-hero-readout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 0;
}

.p1-hero-power {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.p1-hero-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--muted-foreground);
    line-height: 1;
}

.p1-hero-value.import { color: var(--p1-import); }
.p1-hero-value.export { color: var(--p1-export); }
.p1-hero-value.muted { color: var(--muted-foreground); }

.p1-hero-num {
    font-family: var(--font-display);
    font-size: clamp(34px, 12vw, 46px);
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.p1-hero-unit {
    font-size: 17px;
    font-weight: 700;
    color: var(--muted-foreground);
}

.p1-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
}

.p1-flow-chip.import {
    color: var(--p1-import);
    background: color-mix(in srgb, var(--p1-import) 12%, transparent);
}

.p1-flow-chip.export {
    color: var(--p1-export);
    background: color-mix(in srgb, var(--p1-export) 12%, transparent);
}

/* ── Money stat ── */
.p1-money {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.p1-money-amount {
    font-family: var(--font-display);
    font-size: clamp(26px, 9vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Costing money is a calm fact (neutral dark); earning is a small reward (green). */
.p1-money-amount.cost { color: var(--foreground); }
.p1-money-amount.earn { color: var(--p1-export); }
.p1-money-amount.muted { color: var(--muted-foreground); }

.p1-money-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 0;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
}

.p1-money-chip.earn {
    color: var(--p1-export);
    background: color-mix(in srgb, var(--p1-export) 12%, transparent);
}

.p1-money-chip svg {
    flex-shrink: 0;
}

/* ── Money explainer popover (transparent backdrop closes on outside tap) ── */
.p1-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.p1-info-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 9999;
    width: 280px;
    max-width: calc(100vw - 40px);
    padding: 14px 16px 16px;
    text-align: left;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: p1-info-in 0.16s ease-out both;
}

@keyframes p1-info-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.p1-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.p1-info-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--foreground);
}

.p1-info-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
}

.p1-info-close:hover {
    background: var(--muted);
}

.p1-info-text {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.p1-info-text:last-child {
    margin-bottom: 0;
}

/* ── Phase tiles (the single home for per-phase watts) ── */
.p1-phase-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 14px 14px 0;
    padding: 12px 6px;
    border-radius: var(--radius-lg);
    background: var(--muted);
}

.p1-phase-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.p1-phase-tile + .p1-phase-tile {
    border-left: 1px solid var(--border);
}

.p1-phase-chip {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--muted-foreground) 14%, transparent);
}

.p1-phase-chip.l1 {
    color: var(--p1-phase-l1);
    background: color-mix(in srgb, var(--p1-phase-l1) 14%, transparent);
}

.p1-phase-chip.l2 {
    color: var(--p1-phase-l2);
    background: color-mix(in srgb, var(--p1-phase-l2) 14%, transparent);
}

.p1-phase-chip.l3 {
    color: var(--p1-phase-l3);
    background: color-mix(in srgb, var(--p1-phase-l3) 14%, transparent);
}

.p1-phase-watts {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.p1-phase-num {
    font-size: 17px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}

.p1-phase-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-foreground);
}

/* ── Embedded live chart ── */
.p1-hero-chart {
    margin-top: 14px;
    border-top: 1px solid var(--border);
}

.p1-hero-chart .rt-chart-area {
    height: 200px;
    min-height: 200px;
}

/* ── Footer: serial number + stale notice ── */
.p1-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 9px 14px 10px;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
}

.p1-hero-sn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.p1-hero-stale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--warning);
    white-space: nowrap;
}

/* ── Fasen table ── */
.p1-fasen-table {
    width: 100%;
    border-collapse: collapse;
}

.p1-fasen-table th {
    padding: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    text-align: right;
}

.p1-fasen-table th:first-child {
    text-align: left;
}

.p1-fasen-table td {
    padding: 10px 0;
    font-size: 14px;
    color: var(--muted-foreground);
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--border);
}

.p1-fasen-table td:first-child {
    text-align: left;
}

/* ── Day energy: inline error row ── */
.p1-summary-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--muted-foreground);
}

.p1-summary-error svg {
    flex-shrink: 0;
    color: var(--warning);
}

.p1-summary-error .btn {
    margin-left: auto;
}

/* ── Energie (7 dagen) ── */
.p1-week-chart {
    position: relative;
    height: 220px;
}

/* ── RealtimeChart window switcher (rendered only when WindowOptions is set) ── */
.rt-window-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 99px;
    background: var(--muted);
}

.rt-window-btn {
    padding: 3px 8px;
    border: 0;
    border-radius: 99px;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rt-window-btn:hover {
    color: var(--foreground);
}

.rt-window-btn.active {
    background: var(--card);
    color: var(--foreground);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

/* Phone: the switcher already says which window is active. */
@media (max-width: 420px) {
    .rt-window-switch + .rt-window-label {
        display: none;
    }
}

/* ===== BTB-103: in-app assistant console (Customer/ChatConsole.razor; host: Customer/Chat.razor, /chat in an impersonation session) ===== */
.chat-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    min-height: calc(100vh - 220px);
}

.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-toolbar-text {
    min-width: 0;
}

.chat-title {
    font-size: 18px;
    font-weight: 700;
}

.chat-disclosure {
    font-size: 13px;
    color: var(--muted-foreground);
}

.chat-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-impersonation-banner {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    color: #92400E;
    font-size: 14px;
    line-height: 1.4;
}

.chat-notice {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--secondary);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.5;
}

.chat-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: #FEE2E2;
    color: #991B1B;
    font-size: 14px;
    line-height: 1.5;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.chat-intro {
    text-align: center;
    color: var(--muted-foreground);
    font-size: 14px;
    padding: 24px 12px 8px;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 88%;
}

.chat-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-msg.assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-msg.user .chat-bubble {
    background: var(--primary);
    color: var(--primary-foreground);
    border-bottom-right-radius: 4px;
}

.chat-msg.assistant .chat-bubble {
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    white-space: normal;
}

.chat-msg.assistant .chat-bubble p {
    margin: 0 0 8px;
}

.chat-msg.assistant .chat-bubble p:last-child,
.chat-msg.assistant .chat-bubble ul:last-child {
    margin-bottom: 0;
}

.chat-msg.assistant .chat-bubble ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.chat-typing {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-height: 40px;
}

.chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-foreground);
    animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Streamed answer in progress: text as it arrives + a blinking caret (BTB-103 SSE). */
.chat-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--muted-foreground);
    animation: chat-cursor-blink 1s steps(2, start) infinite;
}

@keyframes chat-cursor-blink {
    to { visibility: hidden; }
}

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.chat-chip {
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--brand-green-dark);
    background: var(--card);
    color: var(--brand-green-dark);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.chat-chip:hover:not(:disabled) {
    background: var(--accent);
}

.chat-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-card {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    min-width: 240px;
}

.chat-card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-foreground);
    margin-bottom: 8px;
}

.chat-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.chat-card-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-card-label {
    font-size: 12px;
    color: var(--muted-foreground);
}

.chat-card-value {
    font-size: 15px;
    font-weight: 600;
}

.chat-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted-foreground);
}

.chat-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.chat-source {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--foreground);
    text-decoration: none;
}

a.chat-source {
    color: var(--brand-green-dark);
    text-decoration: underline;
}

.chat-handoff {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--brand-green-dark);
    border-radius: var(--radius-lg);
    background: var(--card);
}

.chat-handoff-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.chat-handoff-text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-handoff-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

.chat-handoff-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.chat-handoff-caption {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.chat-handoff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    width: 100%;
}

.chat-feedback {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
}

.chat-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.chat-feedback-btn:hover:not(:disabled),
.chat-feedback-btn.active {
    background: var(--accent);
    color: var(--brand-green-dark);
}

.chat-feedback-report {
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    font-family: var(--font-body);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 6px;
}

.chat-closed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 14px;
}

.chat-composer {
    position: sticky;
    bottom: 0;
    padding: 8px 0 4px;
    background: var(--background);
}

.chat-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-textarea {
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    resize: vertical;
    font-family: var(--font-body);
    line-height: 1.4;
}

.chat-send {
    height: 44px;
    width: 48px;
    padding: 0;
    flex-shrink: 0;
}

.chat-composer-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted-foreground);
    line-height: 1.4;
}

.chat-consent {
    width: 100%;
}

.chat-consent .card-content {
    padding: 16px 24px 24px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-consent h4 {
    margin: 16px 0 4px;
    font-size: 14px;
}

.chat-consent ul {
    margin: 0;
    padding-left: 20px;
}

.chat-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.chat-modal {
    max-width: 480px;
}

.chat-report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

@media (max-width: 480px) {
    .chat-msg {
        max-width: 94%;
    }
    .chat-consent-actions {
        flex-direction: column-reverse;
    }
    .chat-consent-actions .btn {
        width: 100%;
    }
}

/* ===== BTB-103 admin: assistant trace (Admin/TurnTimeline.razor, AssistentGesprekken.razor, AssistentCijfers.razor) ===== */
/* ===== Admin › Chat-bot (ag-*): Cijfers, Gesprekken, TurnTimeline, ChatRating ===== */
.ag-mono { font-family: var(--font-mono); }
.ag-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Grids with minmax(0, 1fr) so a wide table scrolls inside its card instead of stretching the page. */
.ag-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Desktop-only KPI wall: tighter tiles than the fleet dashboard, nine of them fit one laptop screen. */
.ag-kpi-grid .metric-card { padding: 12px 16px; gap: 2px; }
.ag-kpi-grid .metric-card-value span:first-child { font-size: 24px !important; line-height: 1.25 !important; }
.ag-cols-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.ag-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Dense tables: one line per cell, tabular digits; .ag-wrap opts a cell back into wrapping. */
.ag-table-tight th, .ag-table-tight td { white-space: nowrap; padding: 10px 12px; }
.ag-table-tight td { font-variant-numeric: tabular-nums; }
.ag-table-tight td.ag-wrap { white-space: normal; }
/* Read-only tables (Cijfers): rows are not links, so no finger cursor and no hover chevron. */
.ag-table-static tr:hover td { cursor: default; }
.ag-table-static tbody tr::after { content: none; }
.ag-table-foot { padding: 8px 16px; border-top: 1px solid var(--border); }
/* A table that follows a card title: breathing room under the green bar, no second frame inside the card. */
.card > .card-header + .table-container { margin-top: var(--space-4); border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.ag-row-link { cursor: pointer; }
.ag-row-muted td { color: var(--muted-foreground); }
.ag-break { overflow-wrap: anywhere; }
.ag-col-wide { min-width: 240px; }

/* ChatRating: thumbs / flag counts */
.ag-rating { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-rating-item { display: inline-flex; align-items: center; gap: 4px; }
.ag-rating-item svg { flex-shrink: 0; }
.ag-rating-item.is-zero { color: var(--muted-foreground); }
.ag-rating-item.is-report { color: var(--destructive); }
.ag-rating-empty { color: var(--muted-foreground); }

/* Conversation meta (definition list, label column + value column per item) */
.ag-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 24px; margin: 0; font-size: 13px; }
.ag-meta-item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ag-meta-item dt { margin: 0; color: var(--muted-foreground); }
.ag-meta-item dd { margin: 0; overflow-wrap: anywhere; }

.ag-handoff-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--muted); }
.ag-summary { margin-bottom: 10px; }
/* Detail › overview: one segment per turn (customer dark, assistant mint, tool/system grey), the customer's
   thumbs / reports and the hand-off as marks above it, a wider gap where the day changes; a segment scrolls to its turn. */
.ag-overview { display: flex; flex-direction: column; gap: 10px; }
.ag-track { display: flex; align-items: flex-end; gap: 3px; padding-top: 18px; }
.ag-track-seg { position: relative; flex: 1 1 0; min-width: 6px; max-width: 40px; height: 10px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: var(--secondary); cursor: pointer; }
.ag-track-user { background: var(--foreground); height: 14px; }
.ag-track-assistant { background: var(--primary); }
.ag-track-tool, .ag-track-system { background: var(--border); height: 6px; }
.ag-track-seg:hover { filter: brightness(0.85); }
.ag-track-seg:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ag-track-gap { flex: 0 0 12px; }
.ag-track-marks { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); display: flex; gap: 1px; pointer-events: none; }
.ag-track-mark { display: inline-flex; }
.ag-track-mark svg { width: 12px; height: 12px; }
.ag-track-mark.is-up { color: var(--primary-strong); }
.ag-track-mark.is-down, .ag-track-mark.is-report { color: var(--destructive); }
.ag-track-mark.is-handoff { color: var(--warning); }
.ag-track-mark.is-flow { color: var(--muted-foreground); }
.ag-track-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.ag-track-key > span { display: inline-flex; align-items: center; gap: 5px; }
.ag-swatch { display: inline-block; width: 14px; height: 8px; border-radius: 2px; background: var(--secondary); }
.ag-swatch.is-user { background: var(--foreground); }
.ag-swatch.is-assistant { background: var(--primary); }
.ag-swatch.is-tool { background: var(--border); }
.ag-key-mark svg { width: 12px; height: 12px; }
.ag-key-mark.is-up { color: var(--primary-strong); }
.ag-key-mark.is-down, .ag-key-mark.is-report { color: var(--destructive); }
.ag-key-mark.is-handoff { color: var(--warning); }
.ag-key-mark.is-flow { color: var(--muted-foreground); }
.ag-overview-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted-foreground); }
.ag-overview-legend .ag-rating { color: var(--foreground); }
.ag-legend-handoff { color: var(--warning); font-weight: 600; }
.ag-overview-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ag-flow-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ag-flow-step { padding: 1px 8px; border-radius: var(--radius-full); background: var(--muted); font-size: 12px; color: var(--muted-foreground); }
.ag-flow-step.is-current { background: var(--secondary); color: var(--foreground); font-weight: 600; }
.ag-flow-sep { color: var(--muted-foreground); font-size: 12px; }
.ag-facts { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; font-size: 13px; }
.ag-facts .ag-meta-item { display: flex; gap: 6px; }
/* Timeline: a day line where the date changes, a customer turn opens a group, tool machinery stays small. */
.ag-timeline { display: flex; flex-direction: column; gap: 6px; }
.ag-day { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.ag-day::before, .ag-day::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.ag-timeline > .ag-day:first-child { margin-top: 0; }
.ag-turn-user { margin-top: 10px; }
.ag-day + .ag-turn-user { margin-top: 0; }
.ag-turn.ag-turn-compact { padding: 6px 14px; background: var(--muted); }
.ag-turn-compact .ag-turn-head { margin-bottom: 0; }
.ag-turn-compact .ag-panel { margin-top: 4px; border-top: 0; padding-top: 0; }
.ag-turn-n { margin-left: auto; }
.ag-turn.is-up { border-color: rgba(2, 155, 119, 0.45); border-left-color: var(--primary-strong); }
.ag-turn.is-down { border-color: rgba(239, 68, 68, 0.5); border-left-color: var(--destructive); }
.ag-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.ag-feedback-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.ag-feedback-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.ag-feedback-pill.is-up { background: rgba(0, 215, 128, 0.16); color: var(--primary-strong); }
.ag-feedback-pill.is-down { background: rgba(239, 68, 68, 0.12); color: var(--destructive); }
.ag-feedback-comment { font-size: 13px; font-style: italic; }
.ag-turn { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--card, #fff); }
.ag-turn-user { border-left: 3px solid var(--primary-strong); }
.ag-turn-assistant { border-left: 3px solid var(--online); }
.ag-turn-tool { border-left: 3px solid var(--warning); background: var(--muted); }
.ag-turn-system { border-left: 3px solid var(--muted-foreground); background: var(--muted); }
.ag-turn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ag-turn-text { font-size: 14px; line-height: 1.55; word-break: break-word; margin-bottom: 4px; max-width: 72ch; }
.ag-turn-text p { margin: 0 0 6px; }
.ag-turn-text ul { margin: 0 0 6px; padding-left: 20px; }
.ag-turn-text p:last-child, .ag-turn-text ul:last-child { margin-bottom: 0; }
.ag-panel { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 4px; }
.ag-panel summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted-foreground); user-select: none; }
.ag-panel summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.ag-panel-item { padding: 4px 0; }
.ag-json { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; background: var(--muted); border-radius: 6px; padding: 8px 10px; margin: 4px 0; max-height: 360px; overflow: auto; }

@media (max-width: 1200px) {
    .ag-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    .ag-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ag-kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .ag-meta { grid-template-columns: minmax(0, 1fr); }
    .ag-meta-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ===== Aandacht nodig (admin cases, BTB-356: Admin/AandachtNodig.razor, AandachtCaseDetail.razor) ===== */
.an-search { width: 100%; max-width: 300px; }
.an-filter-select { max-width: 260px; }
.an-btn { text-decoration: none; }
/* Badges stay one line inside wrapping cells. */
.an-table .badge { white-space: nowrap; }
/* Foreground links: .text-primary (#029B77) is ~3.5:1 on white, below AA for 14 px text. */
.an-link { color: var(--foreground); text-decoration: none; }
.an-link:hover { text-decoration: underline; }
.an-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
.an-link-underline { text-decoration: underline; text-underline-offset: 2px; }
.an-col-problem { min-width: 150px; }
.an-note-preview { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-subline { margin-top: 4px; }
.an-show-sm { display: none; }
/* .ag-facts resets its margin, so the gap below it lives here. */
.an-facts { margin-bottom: 12px; }
.an-evidence { margin: 2px 0 12px; padding-left: 18px; font-size: 13px; }
.an-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.an-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.an-form .input, .an-form .select { width: 100%; font-weight: 400; }
.an-form-wide { grid-column: 1 / -1; }
.an-form-help { align-self: end; margin: 0 0 9px; }
/* .input is a fixed 36 px; a textarea also needs the body font (browsers default it to monospace). */
.an-note { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; line-height: 1.5; font-family: inherit; }
.an-timeline { list-style: none; margin: 0; padding: 0; }
.an-event { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.an-event:first-child { padding-top: 0; }
.an-event:last-child { border-bottom: 0; padding-bottom: 0; }
.an-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--primary-strong); }
.an-event.is-auto .an-dot { background: var(--border); }
.an-event-text { font-size: 14px; }
.an-event.is-auto .an-event-text { color: var(--muted-foreground); }
.an-event-note { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.an-event-meta { grid-column: 2; font-size: 12px; color: var(--muted-foreground); }

/* Laptop widths: the category label already says what kind of problem it is, so the Type column goes first. */
@media (max-width: 1366px) {
    .an-hide-md { display: none; }
}
@media (max-width: 1280px) {
    .an-note-preview { max-width: 160px; }
}

@media (max-width: 640px) {
    .an-hide-sm { display: none; }
    .an-show-sm { display: block; }
    .an-search, .an-filter-select { max-width: none; }
    /* A select's min-width is its longest option ("Storing 3, type A: …"), wider than the card at 360 px. */
    .an-filter-select { min-width: 0; width: 100%; }
    .an-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
    .an-counters .compact-stat-label { text-align: center; }
    .an-table th, .an-table td { padding: 8px; }
    .an-col-problem { min-width: 0; }
    .an-form { grid-template-columns: minmax(0, 1fr); }
    .an-form-help { margin: -8px 0 0; }
}