/* ═══════════════════════════════════════════════
   WELLER ENERGIE – Custom Styles
   Based on DASHBOARD_ANZEIGEN_v35 mockup
   ═══════════════════════════════════════════════ */

:root {
    --we-primary: #618cc7;
    --we-primary-container: #004ba0;
    --we-primary-light: #dbeaff;
    --we-secondary: #1d5aaf;
    --we-secondary-container: #618cc7;
    --we-tertiary: #00391a;
    --we-tertiary-container: #005228;
    --we-on-tertiary-container: #44cc79;
    --we-success: #44cc79;
    --we-success-light: #e8faf0;
    --we-success-text: #005228;
    --we-warning: #f59e0b;
    --we-warning-light: #fef3c7;
    --we-warning-border: rgba(245, 158, 11, 0.26);
    --we-warning-text: #b45309;
    --we-danger: #ba1a1a;
    --we-error: #ba1a1a;
    --we-on-error: #ffffff;
    --we-error-container: #ffdad6;
    --we-on-error-container: #93000a;
    
    --we-surface: #fcf8f8;
    --we-surface-dim: #dcd9d9;
    --we-surface-bright: #fcf8f8;
    --we-surface-container-lowest: #ffffff;
    --we-surface-container-low: #f6f3f2;
    --we-surface-container: #f0edec;
    --we-surface-container-high: #ebe7e7;
    --we-surface-container-highest: #e5e2e1;
    --we-on-surface: #1c1b1b;
    --we-on-surface-variant: #444653;
    --we-outline: #747685;
    --we-outline-variant: #c4c5d6;
    --we-background: #f1f5f9;
    --we-on-background: #1c1b1b;
    --we-surface-gray: #F5F5F5;
    --we-primary-mid: #618cc7;
    --we-pure-white: #FFFFFF;

    --we-border: var(--we-surface-gray);
    --we-text: var(--we-on-background);
    --we-muted: var(--we-on-surface-variant);
    
    /* Spacing & Rounded */
    --we-radius-sm: 0.4rem;
    --we-radius: 0.9rem;
    --we-radius-md: 1.0rem;
    --we-radius-lg: 1.2rem;
    --we-radius-xl: 1.5rem;
    --we-radius-full: 9999px;

    --we-spacing-gutter: 24px;
    --we-spacing-margin-mobile: 16px;
    --we-spacing-margin-desktop: 48px;
    --we-spacing-stack-sm: 8px;
    --we-spacing-stack-md: 16px;
    --we-spacing-stack-lg: 32px;
}

/* WCAG 2.1 AA — PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: scroll !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }
}

/* WCAG 2.1 AA — KEYBOARD FOCUS STYLES */
*:focus-visible {
    outline: 3px solid var(--we-primary-mid, #618cc7) !important;
    outline-offset: 2px !important;
}

/* Disable focus outline on non-interactive headings focused by Blazor's FocusOnNavigate */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible, h5:focus-visible, h6:focus-visible {
    outline: none !important;
}

/* Disable focus outline on header action buttons when focused programmatically or via click */
.header-action-button:focus:not(:focus-visible) {
    outline: none !important;
}

/* WCAG 2.1 AA — SKIP TO CONTENT LINK */
.skip-to-content {
    background: var(--we-primary);
    color: var(--we-pure-white);
    padding: 0.75rem 1.5rem;
    position: absolute;
    top: -100px;
    left: 2rem;
    z-index: 10000;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--we-radius-sm) var(--we-radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: top 0.2s ease;
}

.skip-to-content:focus-visible {
    top: 0;
}

/* BODY BACKGROUND FROM MOCKUP */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size-adjust: from-font;
    background-color: var(--we-background);
}

body {
    color: var(--we-text);
}

/* HEADLINE LETTER SPACING */
h1, h2, h3, h4, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
    letter-spacing: -0.015em !important;
    font-weight: 700;
}

/* MAIN CONTAINER */
.main-container {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* ═══ MUDBLAZOR LAYOUT OFFSET (global — CSS isolation cannot pierce MudBlazor render) ═══
   Sidebar is 88px wide and fixed. Push main content to the right on all screens > 700px.
   Below 700px the sidebar moves to bottom bar, so no horizontal offset is needed there.  */
.mud-main-content {
    margin-inline-start: 88px !important;
    min-height: calc(100vh - 80px);
    overflow: auto;
}

/* Mobile: sidebar becomes drawer, no left offset, no bottom offset */
@media (max-width: 700px) {
    .mud-main-content {
        margin-inline-start: 0 !important;
        margin-block-end: 0 !important;
    }
}


/* BRAND LOGO */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ═══ HERO CARD ═══ */
.hero-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    gap: 2rem;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

.hero-stats-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hero-stat-label {
    font-size: 0.8rem;
    color: var(--we-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.hero-stat-val {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--we-text);
    line-height: 1.2;
}

.hero-stat-val.green {
    color: var(--we-success);
}

.dashboard-summary-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    gap: 1.5rem;
    padding: 1.75rem;
}

.dashboard-summary-content {
    gap: 1.25rem;
}

.dashboard-summary-headline {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-summary-kicker {
    color: #2563eb;
    font-size: clamp(0.72rem, 0.62rem + 0.28vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dashboard-summary-title {
    color: #0f172a;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
}

.dashboard-summary-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.dashboard-stat-card,
.dashboard-chart-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.dashboard-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 182px;
    padding: 1.15rem 1.2rem;
}

.dashboard-stat-card--primary {
    background: var(--we-pure-white);
}

.dashboard-stat-card--energy {
    background: var(--we-pure-white);
}

.dashboard-stat-card--cost {
    background: var(--we-pure-white);
}

.dashboard-stat-card__label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-stat-card__value {
    color: #0f172a;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.dashboard-stat-card__value--compact {
    font-size: 1.3rem;
}

.dashboard-stat-card__value--accent {
    color: #0f172a;
    font-size: 1.35rem;
}

.dashboard-stat-card__meta {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: auto;
}

.dashboard-stat-card__split-row {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-stat-card__split-row--secondary {
    margin-top: 0.1rem;
}

.dashboard-stat-card__footer {
    align-items: center;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.7rem;
}

.dashboard-stat-card__footer-value {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.dashboard-stat-card__divider {
    background: rgba(148, 163, 184, 0.2);
    display: block;
    height: 1px;
    margin: 0.05rem 0 0.15rem;
    width: 100%;
}

.dashboard-energy-chip {
    align-items: center;
    border-radius: var(--we-radius);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    margin-top: 0.05rem;
}

.dashboard-energy-chip--strom {
    background: var(--we-primary-light);
    color: var(--we-primary);
}

.dashboard-energy-chip--gas {
    background: var(--we-warning-light);
    color: var(--we-warning-text);
}

.dashboard-energy-chip__dot {
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.dashboard-energy-chip--strom .dashboard-energy-chip__dot {
    background: var(--we-primary);
}

.dashboard-energy-chip--gas .dashboard-energy-chip__dot {
    background: var(--we-warning);
}

.dashboard-chart-card {
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    gap: 1rem;
    min-width: 320px;
    padding: 1.15rem 1.2rem;
}

.dashboard-chart-card__header,
.dashboard-chart-card__body,
.dashboard-chart-legend__label-group {
    align-items: center;
    display: flex;
}

.dashboard-chart-card__header {
    gap: 0.6rem;
    justify-content: space-between;
}

.dashboard-chart-card__title {
    color: #0f172a;
    font-size: clamp(0.98rem, 0.88rem + 0.35vw, 1.08rem);
    font-weight: 700;
    margin-top: 0.2rem;
}

.dashboard-chart-card__body {
    gap: 0.85rem;
}

.dashboard-chart-card__donut {
    flex: 0 0 auto;
}

.dashboard-chart-card__donut text,
.dashboard-chart-card__donut tspan {
    fill: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    transition: font-size 0.15s ease, font-weight 0.15s ease;
}

.dashboard-chart-card__donut g:hover text,
.dashboard-chart-card__donut g:hover tspan {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    fill: #ffffff !important;
}

.dashboard-chart-card__donut .mud-chart-legend,
.dashboard-chart-card__donut .mud-charts-legend,
.dashboard-chart-card__donut .mud-chart-legend-container {
    display: none !important;
}

.dashboard-chart-card__empty {
    align-items: center;
    background: #f1f5f9;
    border-radius: 50%;
    color: #64748b;
    display: flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    height: 180px;
    justify-content: center;
    width: 180px;
}

.dashboard-chart-legend {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-chart-legend__item {
    align-items: center;
    display: flex;
    font-size: 0.82rem;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-chart-legend__label-group {
    gap: 0.5rem;
}

.dashboard-chart-legend__dot {
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.dashboard-chart-legend__label {
    color: #64748b;
    font-size: clamp(0.82rem, 0.74rem + 0.25vw, 0.92rem);
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    flex-shrink: 1;
    min-width: 0;
}

.dashboard-chart-legend__value {
    font-size: clamp(0.88rem, 0.8rem + 0.28vw, 0.98rem);
    font-weight: 800;
}

/* ═══ NAV GRID (5 cards) ═══ */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 0 auto 2rem;
    max-width: 1200px;
    width: 100%;
}

/* Scoped sidebar item navigation styles have been modernized and moved into MainLayout.razor.css */

.nav-card {
    align-items: flex-start;
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    text-decoration: none;
    color: inherit;
    min-height: 154px;
}

.nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--we-primary);
}

.nav-card.active {
    background: var(--we-pure-white);
    border-color: var(--we-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.nav-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--we-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-box--neutral {
    background: var(--we-surface-gray);
    border: 1px solid var(--we-surface-gray);
    color: var(--we-text);
}

.nav-card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-card-title {
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 700;
}

.nav-card-sub {
    color: #64748b;
    font-size: 0.92rem;
}

.nav-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--we-error);
    color: var(--we-on-error);
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 1.5rem;
    padding: 0.24rem 0.5rem;
    border-radius: var(--we-radius);
    text-align: center;
}

/* ═══ FILTER BAR ═══ */
.filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    background: white;
    padding: 0.75rem;
    border-radius: var(--we-radius);
    border: 1px solid var(--we-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* ═══ GRID/LIST ITEMS ═══ */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.list-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-item {
    background: white;
    border: 1px solid var(--we-border);
    border-radius: var(--we-radius);
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: 0.2s;
    cursor: pointer;
    animation: fadeIn 0.3s ease-out;
}

.list-item:hover {
    border-color: var(--we-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ═══ DETAIL VIEW ═══ */
.detail-view {
    background: white;
    border: 1px solid var(--we-border);
    border-radius: var(--we-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.detail-section-header {
    background: var(--we-primary-light);
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--we-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-main-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--we-border);
}

/* ═══ ANIMATIONS ═══ */
@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.anim-delay-1 { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.anim-delay-2 { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.anim-delay-3 { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.fade-in { animation: fadeIn 0.3s ease-out both; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
    .detail-main-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .nav-grid { grid-template-columns: repeat(3, 1fr); }

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .detail-main-grid { grid-template-columns: 1fr 1fr; }
    .nav-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-card { flex-direction: column; }

    .dashboard-chart-card {
        min-width: 100%;
        width: 100%;
    }

    .dashboard-chart-card__body {
        align-items: flex-start;
        flex-direction: column;
    }
}

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

    .donut-wrap,
    .mud-chart,
    .mud-chart-donut,
    .dashboard-chart-card__empty {
        width: 240px !important;
        height: 240px !important;
        margin: 0 auto !important;
    }
    .donut-total-label {
        font-size: 0.72rem !important;
    }
    .donut-total-val {
        font-size: 1.45rem !important;
    }
}

/* ═══ LOGIN PAGE ═══ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at top left, rgba(219, 234, 254, 0.95), transparent 38%),
        radial-gradient(circle at bottom right, rgba(96, 165, 250, 0.45), transparent 40%),
        linear-gradient(135deg, #eff6ff 0%, #bfdbfe 40%, #60a5fa 72%, #2563eb 100%);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.22), transparent 22%),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.16), transparent 26%);
    pointer-events: none;
    user-select: none;
}

.login-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 45%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 120px);
    pointer-events: none;
}

.login-card {
    position: relative;
    z-index: 1;
    width: min(100%, 28rem);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.5rem;
    box-shadow: 0 32px 90px -32px rgba(15, 23, 42, 0.55);
    padding: 3rem 2.25rem 2.25rem;
    text-align: center;
    backdrop-filter: blur(8px);
}

.login-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.login-card__logo {
    width: min(100%, 14rem);
    height: auto;
    display: block;
}

.login-card__title {
    margin: 0 0 0.75rem;
    font-size: 1.65rem;
    font-weight: 800;
    color: #334155;
}

.login-card__subtitle {
    margin: 0 0 1.75rem;
    color: #64748b;
    font-size: 0.98rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-validation,
.login-message {
    color: var(--we-danger);
    font-size: 0.85rem;
    text-align: left;
}

.login-inline-error {
    align-items: center;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 1rem;
    box-shadow: 0 12px 28px -22px rgba(239, 68, 68, 0.65);
    color: #b91c1c;
    display: flex;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.login-inline-success {
    align-items: center;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 1rem;
    box-shadow: 0 12px 28px -22px rgba(16, 185, 129, 0.65);
    color: #047857;
    display: flex;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.login-inline-info {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 1rem;
    box-shadow: 0 12px 28px -22px rgba(59, 130, 246, 0.65);
    color: #1e40af;
    display: flex;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}


.login-validation {
    background: rgba(254, 242, 242, 0.92);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 1rem;
    margin: 0;
    padding: 0.8rem 0.95rem;
}

.login-validation ul {
    margin: 0;
    padding-left: 1.15rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: left;
}

.login-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: var(--we-radius-sm);
    padding: 0.95rem 1rem;
    font-size: 1rem;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.login-input:focus {
    outline: none;
    border-color: var(--we-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}

.login-button {
    width: 100%;
    border: 0;
    border-radius: var(--we-radius-sm);
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 16px 30px -18px rgba(37, 99, 235, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.login-button:hover,
.login-button:focus {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px -18px rgba(37, 99, 235, 0.95);
    filter: brightness(1.03);
}

.login-forgot {
    margin-top: 0.25rem;
    color: #2563eb;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.login-forgot:hover,
.login-forgot:focus {
    text-decoration: underline;
}

.login-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.login-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.login-checkbox {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.35rem;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    accent-color: var(--we-primary);
    transition: all 0.2s ease;
}

@media (max-width: 640px) {
    .login-card {
        padding: 2.25rem 1.25rem 1.5rem;
        border-radius: 1.2rem;
    }

    .login-card__logo {
        width: min(100%, 12rem);
    }
}

/* ═══ PRO DETAIL VIEW ═══ */
.info-col { display: flex; flex-direction: column; gap: 0.75rem; }
.info-col-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--we-primary); }
.info-item { display: flex; flex-direction: column; gap: 0.1rem; }
.info-label { font-size: 0.75rem; color: var(--we-muted); }
.info-val { font-size: 0.85rem; font-weight: 500; }

.action-bar { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--we-border); display: flex; gap: 1rem; }
.action-link { font-size: 0.75rem; color: var(--we-primary); text-decoration: none; font-weight: 600; cursor: pointer; }
.action-link:hover { text-decoration: underline; }
.sub-list-section { padding: 1rem 1.5rem; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 0.5rem; }
.mini-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--we-border); color: var(--we-muted); text-transform: uppercase; font-size: 0.7rem; }
.mini-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--we-border); }
.mini-table tr:hover { background: var(--we-muted-light, #f8fafc); }

/* ═══ STAMMDATEN ═══ */
/* ═══ CHANGE PASSWORD PAGE ═══ */
.chpw-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 200px); padding: 1rem 1rem 2rem; }
.chpw-card { background: var(--we-pure-white); border: 1px solid var(--we-surface-gray); border-radius: var(--we-radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.07); padding: 2rem 2.25rem 2.25rem; width: 100%; max-width: 480px; }
.chpw-card__header { align-items: center; display: flex; gap: 0.85rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--we-surface-gray); }
.chpw-card__icon-wrap { align-items: center; background: var(--we-primary-light, #dbeaff); border-radius: var(--we-radius); display: flex; flex-shrink: 0; height: 44px; justify-content: center; width: 44px; }
.chpw-card__title { color: var(--we-text); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.sd-page__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.we-page-title {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: uppercase;
}
.sd-section { background: var(--we-pure-white); border: 1px solid var(--we-surface-gray); border-radius: var(--we-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.05); margin-bottom: 1.5rem; overflow: hidden; }

/* Virtual Bank Card Styles */
.virtual-bank-card-container { display: flex; justify-content: center; padding: 1rem 0 1.5rem 0; width: 100%; }
.virtual-bank-card { width: 100%; max-width: 350px; aspect-ratio: 1.586; position: relative; border-radius: var(--we-radius-xl); padding: 1.5rem; color: #ffffff; box-shadow: 0 15px 35px rgba(30, 58, 138, 0.25); background: linear-gradient(135deg, #0b1528 0%, #618cc7 70%, #1d5aaf 100%); overflow: hidden; font-family: 'Courier New', Courier, monospace; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, filter 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
.virtual-bank-card:hover { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.02); box-shadow: 0 25px 50px rgba(30, 58, 138, 0.4); filter: brightness(1.08); }
.virtual-bank-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 80%); pointer-events: none; }
.card-header-logo { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.card-logo-text { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); text-shadow: 0 2px 4px rgba(0,0,0,0.15); font-family: inherit; }
.card-wireless { fill: rgba(255, 255, 255, 0.7); width: 20px; height: 20px; transform: rotate(90deg); }
.card-chip { width: 44px; height: 32px; background: linear-gradient(135deg, #ffe066 0%, #f5b041 100%); border-radius: var(--we-radius); position: relative; box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.1); margin-top: 0.5rem; }
.card-chip::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(0,0,0,0.15); border-radius: 2px; }
.card-number { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; margin: 1rem 0; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.25); word-spacing: 0.1em; }
.card-footer { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.card-footer-item { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.card-label { font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); }
.card-value { font-size: 0.72rem; font-weight: 700; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }

/* Contact Profile Card Styles */
.sd-profile-grid { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.sd-profile-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--we-pure-white); border: 1px solid var(--we-surface-gray); border-radius: var(--we-radius); padding: 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; margin-bottom: 0.5rem; position: relative; }
.sd-profile-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-color: var(--we-primary); }
.sd-profile-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--we-primary); color: #ffffff; font-weight: 700; font-size: 1.05rem; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 39, 125, 0.2); }
.sd-profile-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sd-profile-badge { display: inline-block; align-self: flex-start; font-size: 0.68rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: var(--we-radius-sm); background: var(--we-surface-gray); color: var(--we-primary); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sd-profile-title { font-size: 0.95rem; font-weight: 700; color: var(--we-text); line-height: 1.3; }
.sd-profile-subtitle { font-size: 0.78rem; color: var(--we-muted); margin-bottom: 0.25rem; font-weight: 500; }
.sd-profile-info-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--we-muted); }
.sd-profile-info-row i { color: var(--we-muted); font-size: 0.9rem; flex-shrink: 0; }
.sd-profile-actions { display: flex; justify-content: flex-end; gap: 0.5rem; width: 100%; border-top: 1px solid var(--we-surface-gray); padding-top: 0.75rem; margin-top: 0.25rem; }
.sd-card-edit-btn { position: absolute; top: 1rem; right: 1rem; opacity: 0.6; transition: opacity 0.2s ease; }
.sd-card-edit-btn:hover { opacity: 1; }

.we-section-header { background: var(--we-surface-gray); border-bottom: 1px solid var(--we-surface-gray); color: var(--we-text); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; padding: 1rem 1.25rem; text-transform: uppercase; }

.we-table-heading { font-size: 0.85rem; text-transform: uppercase; color: var(--we-muted); font-weight: 800; letter-spacing: 0.04em; }
.sd-body { padding: 1.25rem; }
.sd-action-bar { align-items: center; border-bottom: 1px solid var(--we-surface-gray); display: flex; gap: 0.75rem; padding: 0.9rem 1.25rem; }
.sd-form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-form-stack { display: flex; flex-direction: column; gap: 0.9rem; }
.sd-inline-fields { display: flex; gap: 0.75rem; }
.sd-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sd-field--grow { flex: 1; }
.sd-field--number { width: 88px; }
.sd-field--postal { width: 110px; }
.sd-label { color: var(--we-text); font-size: 0.82rem; font-weight: 700; }
.sd-input { background: var(--we-surface-gray); border: 1px solid var(--we-outline-variant); border-radius: var(--we-radius-sm); box-sizing: border-box; color: var(--we-text); font-size: 0.92rem; font-weight: 500; outline: none; padding: 0.72rem 0.85rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; width: 100%; }
.sd-input:focus { background: var(--we-pure-white); border-color: var(--we-secondary); box-shadow: 0 0 0 4px rgba(28, 93, 175, 0.15); }
.sd-input:disabled { background: var(--we-surface-gray); color: var(--we-muted); cursor: not-allowed; }
.sd-divider { height: 1px; background: var(--we-surface-gray); margin: 1rem 0; }
.sd-table-shell { background: var(--we-pure-white); border: 1px solid var(--we-surface-gray); border-radius: var(--we-radius); padding: 1rem; }
.sd-table-heading { color: #0f172a; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.85rem; }
.sd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; min-width: 900px; }
.sd-table th { background: #f8fafc; border-bottom: 1px solid rgba(148, 163, 184, 0.2); color: #0f172a; font-size: 0.76rem; font-weight: 800; padding: 0.9rem 0.75rem; text-align: left; white-space: nowrap; }
.sd-table th:first-child { border-top-left-radius: 14px; }
.sd-table th:last-child { border-top-right-radius: 14px; }
.sd-table td { background: #ffffff; border-bottom: 1px solid rgba(226, 232, 240, 0.95); padding: 0.75rem; }
.sd-table td input, .sd-table-input { background: transparent; border: 1px solid transparent; border-radius: 6px; box-sizing: border-box; color: #0f172a; font-size: 0.82rem; outline: none; padding: 0.25rem 0.4rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; width: 100%; }
.sd-table td input:focus, .sd-table-input:focus { background: transparent; border-color: rgba(37, 99, 235, 0.34); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
.sd-table-input:not(:disabled) { background: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.24); }
.sd-table-input:not(:disabled):focus { background: #ffffff; border-color: rgba(37, 99, 235, 0.38); }
.sd-table tr.selected td { background: #ffffff; }
.sd-table tbody tr:hover td { background: #f8fafc; }

/* ═══ ABLESUNG / ZÄHLERSTÄNDE ═══ */
.ablesung-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ablesung-page__header,
.ablesung-toolbar-actions,
.ablesung-detail-view__header,
.ablesung-meter-card__meta-row {
    align-items: center;
    display: flex;
}

.ablesung-page__header {
    justify-content: space-between;
    gap: 1rem;
}

.ablesung-detail-view__header {
    justify-content: flex-start;
    gap: 1.5rem;
}

.ablesung-page__kicker {
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ablesung-page__title,
.ablesung-detail-view__title {
    color: #0f172a;
    font-weight: 800 !important;
    margin: 0;
}

.ablesung-page__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.ablesung-detail-header-text {
    border-left: 2px solid rgba(148, 163, 184, 0.3);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ablesung-toolbar-actions {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ablesung-view-toggle,
.ablesung-export-button,
.ablesung-back-button {
    align-items: center;
    background: var(--we-pure-white);
    border: 1px solid var(--we-outline-variant);
    border-radius: var(--we-radius-sm);
    color: var(--we-text);
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    min-height: 42px;
    padding: 0 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ablesung-view-toggle:hover,
.ablesung-export-button:hover,
.ablesung-back-button:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: var(--we-primary);
}

.ablesung-view-toggle--active {
    background: var(--we-primary);
    border-color: var(--we-primary);
    color: var(--we-pure-white);
}

.ablesung-export-button {
    color: var(--we-text);
}

.ablesung-meter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.ablesung-meter-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 220px;
    padding: 1.15rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ablesung-meter-card:hover {
    border-color: var(--we-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.ablesung-meter-card__icon {
    align-items: center;
    background: var(--we-surface-gray);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius-sm);
    color: var(--we-text);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.ablesung-meter-card__status {
    align-items: center;
    border-radius: var(--we-radius-sm);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 800;
    justify-content: center;
    margin-left: auto;
    padding: 0.3rem 0.65rem;
}

.ablesung-meter-card__status--pending {
    background: var(--we-warning-light);
    color: var(--we-warning-text);
}

.ablesung-meter-card__status--done {
    background: var(--we-success-light);
    color: var(--we-success-text);
}

.ablesung-meter-status-badge {
    align-items: center;
    border-radius: var(--we-radius-sm);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
}

.ablesung-meter-status-badge--pending {
    background: var(--we-warning-light);
    color: var(--we-warning-text);
}

.ablesung-meter-status-badge--done {
    background: var(--we-success-light);
    color: var(--we-success-text);
}

.ablesung-meter-card__line {
    color: #64748b;
    font-size: 0.95rem;
    padding-inline: 0.15rem;
}

.ablesung-meter-card__line--primary {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
}

.ablesung-meter-card__meta-row {
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 0.15rem;
}

.ablesung-meter-card__meta-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.ablesung-meter-card__meta-value {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: right;
}

.ablesung-table-shell {
    margin-top: 0;
}

.sd-table-footer,
.ablesung-table-footer {
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Unified sizing and styling for table footer elements */
.sd-table-footer select.ablesung-table-filter,
.ablesung-table-footer select.ablesung-table-filter {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 1.5rem 0 0.5rem !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--we-outline-variant) !important;
    background-color: var(--we-surface-gray) !important;
    color: var(--we-text) !important;
    font-weight: 600 !important;
    width: auto !important;
    min-width: 60px !important;
    cursor: pointer;
    vertical-align: middle;
}

.sd-table-footer button.ablesung-view-toggle,
.ablesung-table-footer button.ablesung-view-toggle {
    min-height: 32px !important;
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    border: 1px solid var(--we-outline-variant) !important;
    background: var(--we-pure-white) !important;
    color: var(--we-text) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    transform: none !important; /* Disable any bounce animation on pager buttons */
    box-shadow: none !important;
}

.sd-table-footer button.ablesung-view-toggle:hover:not(:disabled),
.ablesung-table-footer button.ablesung-view-toggle:hover:not(:disabled) {
    background: var(--we-surface-gray) !important;
    border-color: var(--we-primary) !important;
    color: var(--we-primary) !important;
    transform: none !important;
}

.sd-table-footer button.ablesung-view-toggle:disabled,
.ablesung-table-footer button.ablesung-view-toggle:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: var(--we-surface-gray) !important;
    border-color: var(--we-outline-variant) !important;
}

.sd-table-footer span,
.ablesung-table-footer span {
    font-size: 0.8rem !important;
    color: var(--we-muted) !important;
    font-weight: 600 !important;
    vertical-align: middle;
}

.ablesung-table__filters th {
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.ablesung-table-filter {
    background: var(--we-surface-gray);
    border: 1px solid var(--we-outline-variant);
    border-radius: var(--we-radius-sm);
    box-sizing: border-box;
    color: var(--we-text);
    font-size: 0.8rem;
    outline: none;
    padding: 0 0.6rem;
    height: 34px;
    width: 100%;
}

.ablesung-table-filter:focus {
    border-color: var(--we-secondary);
    box-shadow: 0 0 0 3px rgba(28, 93, 175, 0.15);
}

.ablesung-table__row {
    cursor: pointer;
}

.ablesung-table__row:hover td {
    background: #f8fafc;
}

.ablesung-detail-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ablesung-entry-panel {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    padding: 1.15rem;
}

.ablesung-entry-panel__header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ablesung-entry-panel__error {
    color: #b42318;
    font-size: 0.84rem;
    font-weight: 700;
}

.ablesung-entry-feedback {
    color: #b42318;
    font-size: 0.84rem;
    font-weight: 700;
    margin-top: 0.75rem;
}

.ablesung-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 1.25rem;
    align-items: end;
    width: 100%;
}

.ablesung-entry-field--date,
.ablesung-entry-field--reading,
.ablesung-entry-field--reason,
.ablesung-entry-field--by {
    width: 100%;
}

.ablesung-entry-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ablesung-entry-field__label {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ablesung-entry-mud {
    width: 100%;
}

.ablesung-entry-input,
.ablesung-entry-select {
    appearance: none;
    background: var(--we-pure-white);
    border: 1px solid var(--we-outline-variant);
    border-radius: var(--we-radius-sm);
    box-sizing: border-box;
    color: var(--we-text);
    font-family: inherit;
    font-size: 0.875rem;
    height: 40px;
    min-height: 40px;
    outline: none;
    padding: 0 0.75rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
}

.ablesung-entry-input:focus,
.ablesung-entry-select:focus {
    border-color: var(--we-secondary);
    box-shadow: 0 0 0 3px rgba(29, 90, 175, 0.15);
}

.ablesung-entry-actions {
    align-items: end;
    display: flex;
    justify-content: flex-end;
}

.ablesung-entry-submit {
    align-items: center;
    background: var(--we-primary);
    border: 1px solid var(--we-primary);
    border-radius: var(--we-radius-sm);
    color: var(--we-pure-white);
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 800;
    height: 40px;
    min-height: 40px;
    padding: 0 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ablesung-entry-submit:hover {
    background: var(--we-primary-container);
    border-color: var(--we-primary-container);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .ablesung-page__header,
    .ablesung-detail-view__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ablesung-toolbar-actions {
        justify-content: flex-start;
    }

    .ablesung-entry-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ablesung-entry-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .ablesung-entry-actions {
        grid-column: span 2;
        display: flex;
        justify-content: flex-end;
    }

    .ablesung-detail-header-text {
        border-left: 0;
        padding-left: 0;
        margin-top: 0.5rem;
    }
}

@media (max-width: 700px) {
    .sd-form-grid { grid-template-columns: 1fr; }
    .sd-inline-fields { flex-direction: column; }
    .sd-field--number,
    .sd-field--postal { width: 100%; }

    .ablesung-entry-grid {
        grid-template-columns: 1fr;
    }

    .ablesung-entry-field--date,
    .ablesung-entry-field--reading,
    .ablesung-entry-field--reason,
    .ablesung-entry-field--by {
        max-width: 100% !important;
    }

    .ablesung-entry-actions {
        justify-content: stretch;
        width: 100%;
    }

    .ablesung-entry-submit {
        justify-content: center;
        width: 100%;
    }
}

/* ═══ DOKUMENTE ═══ */
.dokumente-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dokumente-page__header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.dokumente-page__title {
    color: #0f172a;
    font-weight: 800 !important;
    margin: 0;
}

.dokumente-page__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.dokumente-search-shell {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    padding: 0.75rem 1rem;
}

.dokumente-search-input {
    width: 100%;
    max-width: 480px;
}

.ablesung-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.ablesung-search-input {
    flex: 1 1 320px;
    min-width: 220px;
    max-width: 480px;
}

.ablesung-toolbar .nachrichten-filter-toggle,
.ablesung-toolbar-actions {
    flex-shrink: 0;
}


.dokumente-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.dokumente-filter-select {
    min-width: 200px;
}

.dokumente-filter-toggle {
    flex-shrink: 0;
}

.dokumente-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
    margin-left: auto;
}

.dokumente-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dokumente-table-shell {
    margin-top: 0;
}

.dokumente-table {
    min-width: 900px;
}

.dokumente-table__badge {
    border-radius: var(--we-radius-sm);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.dokumente-table__badge--unread {
    background: var(--we-error-container);
    color: var(--we-on-error-container);
}

.dokumente-table__badge--read {
    background: var(--we-surface-container-high);
    color: var(--we-on-surface-variant);
}

.dokumente-table__row--selected td {
    background: #eff6ff !important;
}

.dokumente-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
    padding: 1.15rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dokumente-card:hover {
    border-color: var(--we-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.dokumente-card--unread {
    border-color: var(--we-primary);
}

.dokumente-card__icon,
.dokumente-card__actions,
.dokumente-card__name-row {
    align-items: center;
    display: flex;
}

.dokumente-card__icon {
    background: var(--we-surface-gray);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius-sm);
    color: var(--we-text);
    height: 48px;
    justify-content: center;
    width: 48px;
}

.dokumente-card__name-row {
    gap: 0.6rem;
    justify-content: space-between;
}

.dokumente-card__title {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.dokumente-card__badge {
    background: var(--we-primary-light);
    border-radius: var(--we-radius-sm);
    color: var(--we-primary);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.dokumente-card__meta-line {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dokumente-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.dokumente-card__action {
    align-items: center;
    background: transparent;
    border: 1px solid var(--we-primary);
    border-radius: var(--we-radius-sm);
    color: var(--we-primary);
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 40px;
    padding: 0 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.dokumente-card__action:hover {
    background-color: var(--we-surface-gray);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .dokumente-page__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ═══ NACHRICHTEN ═══ */
.nachrichten-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nachrichten-page__header,
.nachrichten-toolbar,
.nachrichten-card__icon,
.nachrichten-card__title-row,
.nachrichten-filter-toggle {
    align-items: center;
    display: flex;
}

.nachrichten-page__header,
.nachrichten-toolbar {
    justify-content: space-between;
    gap: 1rem;
}

.nachrichten-page__title {
    color: #0f172a;
    font-weight: 800 !important;
    margin: 0;
}

.nachrichten-page__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.nachrichten-search-input {
    flex: 1;
    min-width: 220px;
}

.nachrichten-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
    margin-left: auto;
}

.nachrichten-filter-toggle {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    padding: 0.25rem;
}

.nachrichten-filter-toggle__button {
    background: transparent;
    border: 0;
    border-radius: calc(var(--we-radius-sm) - 2px);
    color: var(--we-muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 38px;
    padding: 0 0.95rem;
}

.nachrichten-filter-toggle__button--active {
    background: var(--we-primary);
    color: var(--we-pure-white);
}

.nachrichten-search-input::placeholder,
.ablesung-search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.nachrichten-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.nachrichten-table-shell {
    margin-top: 0;
}

.nachrichten-table {
    min-width: 1100px;
}

.nachrichten-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
    padding: 1.15rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.nachrichten-card:hover {
    border-color: var(--we-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.nachrichten-card--unread {
    border-color: var(--we-primary);
}

.nachrichten-card__icon {
    border-radius: var(--we-radius-sm);
    height: 48px;
    justify-content: center;
    width: 48px;
}

.nachrichten-card__icon--read {
    background: var(--we-surface-gray);
    border: 1px solid var(--we-surface-gray);
    color: var(--we-muted);
}

.nachrichten-card__icon--unread {
    background: var(--we-primary-light);
    border: 1px solid var(--we-primary-light);
    color: var(--we-primary);
}

.nachrichten-card__title-row {
    gap: 0.6rem;
    justify-content: space-between;
}

.nachrichten-card__title {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.nachrichten-card__badge {
    background: var(--we-error-container);
    border-radius: var(--we-radius-sm);
    color: var(--we-on-error-container);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.nachrichten-card__meta-line {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .nachrichten-page__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .nachrichten-toolbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .nachrichten-search-input {
        min-width: auto;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .nachrichten-toolbar-actions {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .nachrichten-toolbar-actions {
        width: 100% !important;
        flex: 1 1 100%;
    }
    
    .nachrichten-toolbar-actions .ablesung-export-button {
        width: 100%;
        justify-content: center;
    }
}

/* ═══ NACHRICHT DETAIL ═══ */
.nachricht-detail-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nachricht-detail-page__title {
    color: #0f172a;
    font-weight: 800 !important;
    margin: 0;
}

.nachricht-detail-page__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.nachricht-detail-actions,
.nachricht-detail-display-grid,
.nachricht-detail-form-grid,
.nachricht-detail-meta-grid,
.nachricht-detail-read-grid {
    display: grid;
    gap: 1rem;
}

.nachricht-detail-shell {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 26px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.35rem;
}

.nachricht-detail-compose-surface,
.nachricht-detail-received {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nachricht-detail-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nachricht-detail-thread-item {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 1rem;
}

.nachricht-detail-thread-item--active {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
}

.nachricht-detail-shell__topbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.nachricht-detail-compose-surface {
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    padding: 1rem;
}

.nachricht-detail-panel__kicker {
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nachricht-detail-display-grid,
.nachricht-detail-form-grid,
.nachricht-detail-meta-grid,
.nachricht-detail-read-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nachricht-detail-display-field,
.nachricht-detail-read-field,
.nachricht-detail-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.nachricht-detail-display-field--wide,
.nachricht-detail-read-field--wide,
.nachricht-detail-form-field--wide {
    grid-column: 1 / -1;
}

.nachricht-detail-display-field span,
.nachricht-detail-read-field span,
.nachricht-detail-form-field span,
.nachricht-detail-summary-list span {
    color: #64748b;
    font-size: 0.88rem;
}

.nachricht-detail-display-value {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    color: #0f172a;
    font-size: 0.95rem;
    min-height: 46px;
    padding: 0.85rem 0.95rem;
}

.nachricht-detail-display-value--message {
    line-height: 1.6;
    min-height: 140px;
    white-space: pre-wrap;
}

.nachricht-detail-compose-header h3 {
    color: #0f172a;
    font-size: 1.2rem;
    margin: 0.3rem 0 0;
}

.nachricht-detail-editor-shell {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    overflow: hidden;
}

.nachricht-detail-editor-toolbar {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
}

.nachricht-detail-editor-select {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #475569;
    font: inherit;
    min-height: 32px;
    padding: 0.2rem 0.45rem;
}

.nachricht-detail-editor-tool {
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    width: 24px;
}

.nachricht-detail-editor-icon {
    align-items: center;
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.nachricht-detail-editor-tool--italic {
    font-style: italic;
}

.nachricht-detail-editor-tool--underline {
    text-decoration: underline;
}

.nachricht-detail-editor-divider {
    background: #cbd5e1;
    display: inline-flex;
    height: 16px;
    width: 1px;
}

.nachricht-detail-form-field--editor {
    gap: 0;
}

.nachricht-detail-editor-content {
    background: #ffffff;
    color: #0f172a;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size-adjust: from-font;
    direction: ltr;
    font-size: 0.875rem;
    line-height: 1.6;
    min-height: 350px;
    outline: none;
    padding: 1rem;
    text-align: left;
    unicode-bidi: plaintext;
    white-space: pre-wrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nachricht-detail-editor-content:focus {
    border-color: rgba(97, 140, 199, 0.4);
    box-shadow: 0 0 0 3px rgba(97, 140, 199, 0.25);
    outline: none;
}

.nachricht-detail-form-field input,
.nachricht-detail-form-field textarea {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    color: #0f172a;
    font: inherit;
    min-height: 46px;
    padding: 0.8rem 0.9rem;
    resize: vertical;
}

.nachricht-detail-form-field--editor textarea {
    border: 0;
    border-radius: 0;
    min-height: 350px;
}

.nachricht-detail-form-field input:focus,
.nachricht-detail-form-field textarea:focus {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.45);
    outline: none;
}

.nachricht-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.nachricht-detail-inline-confirmation {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(245, 158, 11, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.nachricht-detail-inline-confirmation__title {
    color: #9a3412;
    font-size: 0.95rem;
    font-weight: 800;
}

.nachricht-detail-inline-confirmation__message {
    color: #7c2d12;
    font-size: 0.92rem;
    line-height: 1.5;
}

.nachricht-detail-inline-confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.nachricht-action-button {
    align-items: center;
    border-radius: var(--we-radius);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 0 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nachricht-action-button:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.nachricht-action-button--primary {
    background: var(--we-primary);
    border: 1px solid var(--we-primary);
    color: var(--we-on-primary);
}

.nachricht-action-button--secondary {
    background: var(--we-pure-white);
    border: 1px solid var(--we-outline-variant);
    color: var(--we-on-surface-variant);
}

@media (max-width: 700px) {
    .nachricht-detail-display-grid,
    .nachricht-detail-form-grid,
    .nachricht-detail-meta-grid,
    .nachricht-detail-read-grid {
        grid-template-columns: 1fr;
    }

    .nachricht-detail-shell__topbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ═══ VERBRAUCHSSTELLEN ═══ */
.verbrauchsstellen-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.verbrauchsstellen-page__title,
.verbrauchsstellen-detail-view__title {
    color: #0f172a;
    font-weight: 800 !important;
    margin: 0;
}

.verbrauchsstellen-page__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}

.verbrauchsstellen-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.verbrauchsstellen-detail-view__header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.verbrauchsstellen-detail-header-text {
    border-left: 2px solid rgba(148, 163, 184, 0.3);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.verbrauchsstellen-search-input {
    flex: 1 1 320px !important;
    min-width: 220px !important;
    max-width: 480px !important;
}

.verbrauchsstellen-filter-select {
    width: 160px !important;
    min-width: 160px !important;
}

.verbrauchsstellen-toolbar-actions {
    margin-left: auto;
}

.verbrauchsstellen-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.verbrauchsstellen-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 220px;
    padding: 1.15rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.verbrauchsstellen-card:hover {
    border-color: var(--we-secondary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.verbrauchsstellen-card__icon {
    align-items: center;
    border-radius: var(--we-radius);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.verbrauchsstellen-card__icon--strom {
    background: var(--we-primary-light);
    border: 1px solid var(--we-outline-variant);
    color: var(--we-primary);
}

.verbrauchsstellen-card__icon--gas {
    background: var(--we-warning-light);
    border: 1px solid var(--we-warning-border);
    color: var(--we-warning-text);
}

.verbrauchsstellen-card__title {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    padding-inline: 0.15rem;
}

.verbrauchsstellen-card__meta {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-inline: 0.15rem;
}

.verbrauchsstellen-detail-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.verbrauchsstellen-detail-container {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 26px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
}

.verbrauchsstellen-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.verbrauchsstellen-subtab-panel {
    padding: 0;
}

.verbrauchsstellen-subtab-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.verbrauchsstellen-subtab-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.verbrauchsstellen-subtab-section--dashed {
    border-top-style: dashed;
    border-top-color: rgba(148, 163, 184, 0.3);
}

.verbrauchsstellen-subtab-divider {
    border-top: 1px dashed rgba(148, 163, 184, 0.3);
    margin: 1.25rem 0;
}

.verbrauchsstellen-detail-section {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.verbrauchsstellen-detail-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.verbrauchsstellen-detail-panel__kicker {
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.verbrauchsstellen-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.verbrauchsstellen-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.verbrauchsstellen-detail-field--wide {
    grid-column: 1 / -1;
}

.verbrauchsstellen-detail-field span,
.verbrauchsstellen-detail-summary-list span {
    color: #64748b;
    font-size: 0.88rem;
}

.verbrauchsstellen-detail-field strong,
.verbrauchsstellen-detail-summary-list strong {
    color: #0f172a;
    font-size: 1rem;
}

.verbrauchsstellen-detail-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.verbrauchsstellen-detail-summary-list div {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.4rem;
}

.verbrauchsstellen-detail-summary-list div:first-child {
    border-top: 0;
    padding-top: 0;
}

.verbrauchsstellen-merged-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.verbrauchsstellen-related-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.verbrauchsstellen-related-list {
    display: grid;
    gap: 0.85rem;
}

.verbrauchsstellen-related-table-shell {
    margin-top: 0;
}

.verbrauchsstellen-related-table {
    min-width: 620px;
}

.verbrauchsstellen-related-table td,
.verbrauchsstellen-related-table th {
    white-space: nowrap;
}

.verbrauchsstellen-related-item {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.verbrauchsstellen-related-item:hover {
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.verbrauchsstellen-related-item__title {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 700;
}

.verbrauchsstellen-related-item__meta {
    color: #64748b;
    font-size: 0.84rem;
}

.verbrauchsstellen-detail-empty {
    color: #64748b;
    font-size: 0.92rem;
}

@media (max-width: 1100px) {
    .verbrauchsstellen-merged-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .verbrauchsstellen-toolbar {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .verbrauchsstellen-search-input {
        min-width: auto !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .verbrauchsstellen-filter-select {
        min-width: 140px !important;
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .verbrauchsstellen-toolbar-actions {
        margin-inline-start: auto;
        width: auto !important;
        flex: 0 0 auto;
    }

    .verbrauchsstellen-detail-view__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .verbrauchsstellen-detail-header-text {
        border-left: 0;
        padding-left: 0;
        margin-top: 0.5rem;
    }
}

@media (max-width: 700px) {
    .verbrauchsstellen-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Elegant Details Summary Card & Tabs split layouts */
.vs-detail-header-card {
    background: linear-gradient(135deg, #eff6ff 0%, rgba(255, 255, 255, 0.96) 100%);
    color: var(--we-text);
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    position: relative;
    overflow: hidden;
}

.vs-detail-header-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.vs-header-card-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 1;
}

.vs-header-card-field span {
    color: var(--we-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vs-header-card-field strong {
    color: var(--we-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

.vs-readings-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 0.7fr);
    gap: 1.5rem;
    align-items: start;
}

.vs-entry-form-vertical {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vs-vertical-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vs-vertical-fields .ablesung-entry-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vs-vertical-fields .ablesung-entry-actions {
    margin-top: 0.5rem;
    width: 100%;
}

.vs-vertical-fields .ablesung-entry-submit {
    width: 100%;
    justify-content: center;
}

/* Contract Details Layout Styles */
.vs-contract-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.vs-contract-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.vs-contract-field-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vs-contract-field-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(37, 99, 235, 0.25);
}

.vs-contract-field-item span {
    color: var(--we-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vs-contract-field-item strong {
    color: var(--we-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .vs-readings-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .vs-detail-header-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .vs-contract-top-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .vs-detail-header-card {
        grid-template-columns: 1fr;
    }
}

/* Stacked Collapsible Cards Details */
.collapsible-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 26px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.collapsible-card:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

.collapsible-card-header {
    align-items: center;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    user-select: none;
    transition: background-color 0.2s ease;
}

.collapsible-card-header:hover {
    background-color: rgba(248, 250, 252, 0.6);
}

.collapsible-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.collapsible-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--we-text);
    margin: 0;
}

.collapsible-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 601px) {
    .collapsible-card-actions .ablesung-export-button {
        min-width: 210px;
        justify-content: center;
        white-space: nowrap;
    }
}

.collapsible-card-toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--we-muted);
}

.collapsible-card-toggle-icon--expanded {
    transform: rotate(180deg);
    color: var(--we-primary);
}

.collapsible-card-body {
    padding: 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    background-color: #ffffff;
    animation: slideDownDetail 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideDownDetail {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive details columns borders */
.vs-detail-column {
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    padding-left: 1.5rem;
}

@media (max-width: 1100px) {
    .vs-detail-column {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.15);
        padding-top: 1rem;
        margin-top: 0.5rem;
    }
}

/* Global Mobile-Responsiveness Overrides */
@media (max-width: 767px) {
    /* Reduce global main container padding on mobile screens */
    .main-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.75rem !important;
    }

    /* Proportionate Typography and Spacings */
    .sd-page__header {
        margin-bottom: 1rem !important;
    }

    .sd-section {
        border-radius: 18px !important;
        margin-bottom: 1rem !important;
    }

    .we-section-header {
        padding: 0.75rem 1rem !important;
        font-size: 0.88rem !important;
    }

    .sd-body {
        padding: 0.75rem !important;
    }

    /* Stack form action bars on mobile devices */
    .sd-action-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
    }

    .sd-action-bar button {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Enhanced Touch Targets */
    .ablesung-view-toggle {
        min-height: 40px !important;
        min-width: 40px !important;
        font-size: 0.9rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .ablesung-table-filter {
        min-height: 40px !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
    }

    .sd-table-footer {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }

    /* Stack consumption point detail contract columns on mobile */
    .verbrauchsstellen-detail-section > div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* ═══ OTHER MOBILE TOOLBARS & CONTAINER POLISH ═══ */
@media (max-width: 900px) {
    /* Ablesung Toolbar */
    .ablesung-toolbar {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .ablesung-search-input {
        min-width: auto;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .ablesung-toolbar .nachrichten-filter-toggle {
        width: auto !important;
        flex: 0 0 auto;
        display: inline-flex !important;
    }

    .ablesung-toolbar-actions {
        margin-inline-start: auto;
        width: auto !important;
        flex: 0 0 auto;
    }

    /* Dokumente Toolbar */
    .dokumente-toolbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .dokumente-search-input {
        min-width: auto;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .dokumente-filter-select {
        min-width: auto;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .dokumente-filter-toggle {
        margin-left: 0;
    }

    .dokumente-toolbar-actions {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    /* Full-width Upload on mobile */
    .dokumente-toolbar-actions {
        width: 100% !important;
        flex: 1 1 100%;
    }
    
    .dokumente-toolbar-actions .dokumente-toolbar__new-button {
        width: 100%;
        justify-content: center;
    }

    /* Collapsible card headers text and action targets */
    .collapsible-card-actions .ablesung-export-button span {
        display: none;
    }
    .collapsible-card-actions .ablesung-export-button {
        min-width: 36px;
        height: 36px;
        width: 36px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
    .collapsible-card-header {
        padding: 1rem;
    }

    /* Hero Card padding polish */
    .hero-card {
        padding: 1.25rem 1rem !important;
    }
    
    /* Main container slightly snugger margins on small phone viewports */
    .main-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ═══ DASHBOARD QUICK ACCESS NAV GRID ═══ */
.dashboard-quick-access {
    display: none !important;
}

.dashboard-quick-access__title {
    color: var(--we-text);
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.dashboard-quick-access__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 600px) {
    .dashboard-quick-access__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .dashboard-quick-access__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .dashboard-quick-access__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.quick-access-card {
    background: var(--we-pure-white);
    border: 1px solid var(--we-surface-gray);
    border-radius: var(--we-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none !important;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease;
}

.quick-access-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 53, 125, 0.06);
    border-color: var(--we-primary-mid);
}

.quick-access-card__icon-shell {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-access-card__icon-shell--blue {
    background: rgba(0, 53, 125, 0.08);
    color: var(--we-primary);
}

.quick-access-card__icon-shell--teal {
    background: rgba(29, 90, 175, 0.08);
    color: var(--we-secondary);
}

.quick-access-card__icon-shell--purple {
    background: rgba(133, 170, 255, 0.15);
    color: #1d5aaf;
}

.quick-access-card__icon-shell--orange {
    background: rgba(245, 158, 11, 0.1);
    color: var(--we-warning-text);
}

.quick-access-card__icon-shell--gray {
    background: rgba(116, 118, 133, 0.1);
    color: var(--mud-palette-action-default);
}

.quick-access-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.quick-access-card__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--we-text);
    margin-bottom: 0.15rem;
}

.quick-access-card__desc {
    font-size: 0.78rem;
    color: var(--we-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-access-card__arrow {
    color: var(--we-muted);
    font-size: 1.1rem !important;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.quick-access-card:hover .quick-access-card__arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--we-primary-mid);
}


@media (min-width: 900px) {
    .contract-detail-column {
        border-inline-start: 1px solid var(--mud-palette-divider);
        padding-inline-start: 1.5rem;
    }
    .contract-detail-column:first-child {
        border-inline-start: none;
        padding-inline-start: 0;
    }
}

.we-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-divider);
    border-radius: 8px;
    margin: 1.5rem 0;
}

.we-empty-state__icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    font-size: 3rem !important;
    margin-bottom: 1rem;
}

.we-empty-state__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.5rem;
}

.we-empty-state__desc {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 320px;
}

.selected-row td {
    background-color: var(--we-primary-light) !important;
    border-bottom: 1px solid var(--we-outline-variant) !important;
}

/* Dashboard Header Global Styles (moved from MainLayout.razor.css to fix Blazor CSS isolation scoping) */
.dashboard-header {
    background: var(--we-pure-white) !important;
    border-bottom: 1px solid var(--we-outline-variant) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 0 2rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

@media (max-width: 960px) {
    .dashboard-header {
        padding: 0 1rem !important;
    }
}

@media (max-width: 700px) {
    .dashboard-header {
        inset-inline-start: 0 !important;
    }
}

@media (max-width: 640px) {
    .dashboard-header {
        padding: 0 0.75rem !important;
    }
}

/* ═══ BUTTON CORNER ROUNDING PARITY ═══ */
/* Ensures all buttons match the premium rounded corners of the login page buttons */
.mud-button:not(.mud-icon-button):not(.header-menu-item),
.mud-button-root:not(.mud-icon-button):not(.header-menu-item),
button:not(.mud-icon-button):not(.header-menu-item):not(.dashboard-sidebar__item):not(.mud-expand-panel-header):not(.mud-tree-item-label):not(.nachrichten-filter-toggle__button),
.btn,
.ablesung-export-button,
.ablesung-back-button,
.nachricht-action-button,
.header-action-button,
.dokumente-toolbar__new-button,
.ablesung-entry-submit,
.ablesung-view-toggle,
.driver-popover-footer button {
    border-radius: var(--we-radius-sm) !important;
}

/* Concentric Pill Toggle Styling (All / Unread Buttons) */
.nachrichten-filter-toggle,
.dokumente-filter-toggle {
    border-radius: var(--we-radius-sm) !important;
}

.nachrichten-filter-toggle__button {
    border-radius: calc(var(--we-radius-sm) - 2px) !important;
}

/* Collapsible card action button styling overrides */
.collapsible-card-actions .ablesung-export-button {
    color: var(--we-primary) !important;
    border-color: var(--we-primary) !important;
    background-color: var(--we-pure-white) !important;
    box-shadow: 0 2px 8px rgba(97, 140, 199, 0.08) !important;
    transition: all 0.2s ease !important;
}

.collapsible-card-actions .ablesung-export-button:hover {
    background-color: var(--we-primary-light) !important;
    border-color: var(--we-secondary) !important;
    color: var(--we-secondary) !important;
    box-shadow: 0 4px 12px rgba(97, 140, 199, 0.16) !important;
}

/* Premium back button overrides - blue text, blue border, white background */
.ablesung-back-button {
    color: var(--we-primary) !important;
    border-color: var(--we-primary) !important;
    background-color: var(--we-pure-white) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.ablesung-back-button:hover {
    background-color: var(--we-primary-light) !important;
    border-color: var(--we-secondary) !important;
    color: var(--we-secondary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Details Action Toolbar styling */
.verbrauchsstellen-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Premium action buttons (styled exactly like .ablesung-back-button) */
.detail-action-button {
    align-items: center;
    background: var(--we-pure-white) !important;
    border: 1px solid var(--we-primary) !important;
    border-radius: var(--we-radius-sm) !important;
    color: var(--we-primary) !important;
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    min-height: 42px !important;
    padding: 0 0.95rem !important;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.detail-action-button:hover {
    background-color: var(--we-primary-light) !important;
    border-color: var(--we-secondary) !important;
    color: var(--we-secondary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

/* Segment/Toggle Container */
.contract-toggle-group {
    display: inline-flex;
    background-color: #f1f5f9;
    padding: 0.25rem;
    border-radius: var(--we-radius-sm);
    border: 1px solid var(--we-outline-variant);
    gap: 0.25rem;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

/* Toggle item button (same dimensions as regular buttons) */
.toggle-group-button {
    align-items: center;
    border-radius: calc(var(--we-radius-sm) - 2px);
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    min-height: 42px !important;
    padding: 0 0.95rem !important;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Active toggled button (white background, blue border, black text) */
.toggle-group-button--active {
    background-color: var(--we-pure-white) !important;
    border-color: var(--we-primary) !important;
    color: #1c1b1b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Inactive toggled button (transparent background, dark/black text) */
.toggle-group-button--inactive {
    background-color: transparent !important;
    color: #444653 !important;
}

.toggle-group-button--inactive:hover {
    color: #1c1b1b !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Chip style for StatusOpen warning inside toggle button */
.toggle-chip-warning {
    background-color: var(--we-warning);
    color: var(--we-pure-white);
    border-radius: var(--we-radius-sm);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 0.4rem;
}

/* Tabular Numbers Alignment for Numeric Data, Dates, and Energy Values */
.ablesung-table td,
.sd-table td,
.numeric-val,
.date-val,
.energy-val {
    font-variant-numeric: tabular-nums;
}

/* Unify MudBlazor outlined input controls (TextFields, Selects, etc.) border-radius */
.mud-input-outlined {
    border-radius: var(--we-radius-sm) !important;
}

/* ═══ UNIFIED PAGE HEADER LAYOUT ═══ */
.we-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.we-page-header__left {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-grow: 1;
}

.we-page-header__left .ablesung-back-button {
    flex-shrink: 0;
    margin-top: 0.15rem; /* Optical alignment with kicker/title stack */
}

.we-page-header__title-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.we-page-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.we-page-header__kicker {
    color: var(--we-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
}

.we-page-header__title {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}

.we-page-header__subtitle {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 0.1rem;
}

.we-page-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .we-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .we-page-header__right {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .we-page-header__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .we-page-header__left .ablesung-back-button {
        margin-top: 0;
    }
}