/* Dark mode is set via @ColorScheme(ColorScheme.Value.LIGHT_DARK) on AppShell — not CSS. */

.view-description {
    color: var(--vaadin-text-color-secondary);
    margin-block: 0;
}

.production-badge,
.neutral-badge {
    border-radius: var(--vaadin-radius-m);
    display: inline-flex;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.production-badge {
    background: color-mix(in srgb, var(--aura-yellow) 20%, transparent);
    color: var(--aura-yellow-text);
}

.neutral-badge {
    background: var(--vaadin-background-container-strong);
    color: var(--vaadin-text-color-secondary);
}

.secondary-text {
    color: var(--vaadin-text-color-secondary);
}

.live-update-hint {
    align-self: center;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    white-space: nowrap;
}

.dashboard-customer-name {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.dashboard-summary-grid,
.dashboard-dataload-grid {
    display: grid;
    gap: var(--vaadin-gap-l);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    width: 100%;
}

.dashboard-metric-card,
.dashboard-dataload-card {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-shadow: var(--aura-shadow-xs);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--vaadin-padding-l);
}

.dashboard-metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
}

.dashboard-metric-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.dashboard-metric-value {
    font-size: var(--aura-font-size-l);
    font-weight: var(--aura-font-weight-semibold);
    overflow-wrap: anywhere;
}

.dashboard-dataload-card {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
}

.dashboard-dataload-card h4 {
    overflow-wrap: anywhere;
}

.dashboard-dataload-details {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-status-badge {
    border-radius: var(--vaadin-radius-m);
    display: inline-flex;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    white-space: nowrap;
}

.dashboard-status-success {
    background: color-mix(in srgb, var(--aura-green) 16%, transparent);
    color: var(--aura-green-text);
}

.dashboard-status-failure {
    background: color-mix(in srgb, var(--aura-red) 16%, transparent);
    color: var(--aura-red-text);
}

.dashboard-status-active {
    background: color-mix(in srgb, var(--aura-accent-color) 16%, transparent);
    color: var(--aura-accent-text-color);
}

.dashboard-status-warning {
    background: color-mix(in srgb, var(--aura-orange) 18%, transparent);
    color: var(--aura-orange-text);
}

.dashboard-status-neutral {
    background: var(--vaadin-background-container-strong);
    color: var(--vaadin-text-color-secondary);
}

.dashboard-empty-state {
    background: var(--vaadin-background-container);
    border: 1px dashed var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-sizing: border-box;
    padding: var(--vaadin-padding-xl);
    text-align: center;
    width: 100%;
}

.dashboard-empty-state h3,
.dashboard-empty-state h4,
.dashboard-empty-state p {
    margin-block: var(--vaadin-gap-xs);
}

.dashboard-error-state {
    border-color: color-mix(in srgb, var(--aura-red) 45%, var(--vaadin-border-color-secondary));
    color: var(--aura-red-text);
}

.dashboard-view vaadin-grid {
    min-height: 12rem;
}

.queue-trigger-link {
    background: var(--aura-accent-color);
    border-radius: var(--vaadin-radius-m);
    color: var(--aura-accent-contrast-color);
    display: inline-flex;
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    text-decoration: none;
}

.queue-trigger-link:hover {
    background: var(--aura-accent-color-dark);
}

.queue-view vaadin-grid {
    min-height: 12rem;
}

.queue-status-badge {
    border-radius: var(--vaadin-radius-m);
    display: inline-flex;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    white-space: nowrap;
}

.queue-status-active {
    background: color-mix(in srgb, var(--aura-accent-color) 16%, transparent);
    color: var(--aura-accent-text-color);
}

.queue-status-warning,
.queue-status-retrying {
    background: color-mix(in srgb, var(--aura-orange) 18%, transparent);
    color: var(--aura-orange-text);
}

.queue-status-neutral {
    background: var(--vaadin-background-container-strong);
    color: var(--vaadin-text-color-secondary);
}

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

.analytics-summary-grid,
.analytics-widget-grid {
    display: grid;
    gap: var(--vaadin-gap-l);
    width: 100%;
}

.analytics-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-block-end: var(--vaadin-gap-l);
}

.analytics-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-card {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-shadow: var(--aura-shadow-xs);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--vaadin-padding-l);
}

.analytics-summary-grid .analytics-card {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
}

.analytics-metric-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.analytics-metric-value {
    font-size: var(--aura-font-size-xl);
    font-weight: var(--aura-font-weight-semibold);
}

.analytics-widget {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    min-height: 23rem;
}

.analytics-widget vaadin-grid {
    min-height: 17rem;
}

.analytics-chart {
    display: block;
    height: 17rem;
    min-width: 0;
    width: 100%;
}

.analytics-chart-empty,
.analytics-empty-state {
    align-content: center;
    box-sizing: border-box;
    min-height: 10rem;
    text-align: center;
}

.analytics-empty-state {
    background: var(--vaadin-background-container);
    border: 1px dashed var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    margin-block-end: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-xl);
}

.analytics-sparkline {
    display: block;
    height: 2rem;
    width: 7rem;
}

.analytics-sparkline polyline {
    fill: none;
    stroke: var(--aura-accent-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.analytics-status-badge {
    border-radius: var(--vaadin-radius-m);
    display: inline-flex;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    white-space: nowrap;
}

.analytics-status-success {
    background: color-mix(in srgb, var(--aura-green) 16%, transparent);
    color: var(--aura-green-text);
}

.analytics-status-failure {
    background: color-mix(in srgb, var(--aura-red) 16%, transparent);
    color: var(--aura-red-text);
}

.analytics-subheading {
    font-size: var(--aura-font-size-m);
    margin: 0;
}

.analytics-error-list {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.analytics-error-list > div {
    display: flex;
    gap: var(--vaadin-gap-m);
    justify-content: space-between;
}

.analytics-error-count {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    flex: 0 0 auto;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

@media (max-width: 1024px) {
    .analytics-widget-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .analytics-filters > * {
        width: 100%;
    }

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

    .analytics-card {
        padding: var(--vaadin-padding-m);
    }
}

.worker-view-heading {
    flex-wrap: wrap;
}

.worker-view-heading .view-description {
    min-width: 0;
}

.worker-fleet-grid {
    display: grid;
    gap: var(--vaadin-gap-l);
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.worker-card {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-shadow: var(--aura-shadow-s);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    min-width: 0;
    padding: var(--vaadin-padding-l);
}

.worker-card-stale {
    border-color: color-mix(in srgb, var(--aura-red) 55%, var(--vaadin-border-color-secondary));
}

.worker-card-heading {
    gap: var(--vaadin-gap-s);
}

.worker-liveness-dot {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: var(--aura-font-size-s);
    width: var(--aura-font-size-s);
}

.worker-alive {
    background: var(--aura-green);
}

.worker-stale {
    background: var(--aura-red);
}

.worker-id {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.worker-card-meta {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.worker-card-stat {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    min-width: 0;
}

.worker-card-stat .detail-value {
    overflow-wrap: anywhere;
}

.worker-stale-notice {
    background: color-mix(in srgb, var(--aura-red) 14%, transparent);
    border-radius: var(--vaadin-radius-m);
    color: var(--aura-red-text);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-m);
}

.worker-stale-notice p {
    margin: 0;
}

.worker-assignments {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
}

.worker-assignment {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    display: flex;
    gap: var(--vaadin-gap-m);
    justify-content: space-between;
    padding: var(--vaadin-padding-m);
}

.worker-assignment-orphaned {
    background: color-mix(in srgb, var(--aura-red) 12%, var(--vaadin-background-container-strong));
    outline: 1px solid color-mix(in srgb, var(--aura-red) 35%, transparent);
}

.worker-assignment > div {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    min-width: 0;
}

.worker-assignment > div:last-child {
    align-items: flex-end;
    text-align: right;
}

.worker-assignment-tenant {
    font-weight: var(--aura-font-weight-semibold);
}

.worker-assignment-target,
.worker-assignment-since,
.worker-assignment-status {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    overflow-wrap: anywhere;
}

.worker-assignment-orphaned .worker-assignment-status {
    color: var(--aura-red-text);
    font-weight: var(--aura-font-weight-semibold);
}

.worker-card-links {
    border-block-start: 1px solid var(--vaadin-border-color-secondary);
    padding-block-start: var(--vaadin-padding-m);
}

.worker-empty-state {
    background: var(--vaadin-background-container);
    border: 1px dashed var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-sizing: border-box;
    padding: var(--vaadin-padding-xl);
    text-align: center;
    width: 100%;
}

.worker-empty-state h3,
.worker-empty-state p {
    margin-block: var(--vaadin-gap-xs);
}

.role-badge {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    color: var(--vaadin-text-color-secondary);
    display: inline-flex;
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.admin-role-badge {
    background: color-mix(in srgb, var(--aura-purple) 18%, transparent);
    color: var(--aura-purple-text);
}

.shared-system-warning {
    background: color-mix(in srgb, var(--aura-orange) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--aura-orange) 45%, transparent);
    border-radius: var(--vaadin-radius-m);
    color: var(--aura-orange-text);
    display: block;
    margin-block-end: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-m);
}

.graph-selection-grid {
    display: grid;
    gap: var(--vaadin-gap-xs) var(--vaadin-gap-l);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    width: 100%;
}

.graph-selection-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-width: 0;
}

.graph-coverage-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    margin-inline-start: var(--vaadin-gap-s);
    white-space: nowrap;
}

.graph-selection-preview {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    display: block;
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
}

.graph-effective-list {
    color: var(--vaadin-text-color-secondary);
    display: block;
    font-size: var(--aura-font-size-xs);
    line-height: var(--aura-line-height-s);
}

.graph-selection-error {
    color: var(--aura-red-text);
    font-size: var(--aura-font-size-xs);
}

.tenant-detail-summary,
.tenant-detail-values {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    width: 100%;
}

.tenant-dataload-card {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-sizing: border-box;
    box-shadow: var(--aura-shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-l);
    width: 100%;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.detail-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
}

.detail-value {
    font-weight: var(--aura-font-weight-medium);
}

.tenant-heading-row {
    flex-wrap: wrap;
}

.tenant-status-badge {
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    white-space: nowrap;
}

.tenant-status-badge.status-success {
    color: var(--aura-green-text);
}

.tenant-status-badge.status-failure {
    color: var(--aura-red-text);
}

.tenant-status-badge.status-warning {
    color: var(--aura-orange-text);
}

.tenant-status-badge.status-neutral {
    color: var(--vaadin-text-color-secondary);
}

.tenant-customer-card,
.system-backlinks-card {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-sizing: border-box;
    box-shadow: var(--aura-shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-l);
    width: 100%;
}

.tenant-section-values,
.system-detail-summary {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    width: 100%;
}

.tenant-dataload-content,
.tenant-section-body {
    box-sizing: border-box;
}

.tenant-config-section {
    background: var(--vaadin-background-container);
    border-radius: var(--vaadin-radius-m);
}

.section-editor-actions {
    border-block-start: 1px solid var(--vaadin-border-color-secondary);
    padding-block-start: var(--vaadin-padding-m);
}

.notice-title,
.detail-eyebrow {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-semibold);
    text-transform: uppercase;
}

.system-detail-summary {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-sizing: border-box;
    box-shadow: var(--aura-shadow-xs);
    padding: var(--vaadin-padding-l);
}

.wizard-shell {
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-shadow: var(--aura-shadow-s);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    margin-inline: auto;
    max-width: 72rem;
    padding: var(--vaadin-padding-l);
    width: 100%;
}

.wizard-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-s);
}

.wizard-step-indicator {
    background: var(--vaadin-background-container-strong);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-xs);
    font-weight: var(--aura-font-weight-medium);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.wizard-step-indicator.current {
    background: var(--aura-accent-surface);
    border-color: var(--aura-accent-border-color);
    color: var(--aura-accent-text-color);
}

.wizard-step-indicator.completed {
    color: var(--aura-green-text);
}

.wizard-step {
    min-height: 18rem;
}

.wizard-navigation {
    border-block-start: 1px solid var(--vaadin-border-color-secondary);
    padding-block-start: var(--vaadin-padding-m);
}

.wizard-notice {
    background: var(--vaadin-background-container-strong);
    border-radius: var(--vaadin-radius-m);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-m);
}

.wizard-review-card {
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-m);
    width: 100%;
}

.wizard-review-values {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.worker-log-action {
    align-items: center;
    background: var(--vaadin-background-container);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    box-shadow: var(--aura-shadow-xs);
    box-sizing: border-box;
    color: var(--vaadin-text-color);
    cursor: var(--vaadin-clickable-cursor);
    display: inline-flex;
    font-weight: var(--aura-font-weight-medium);
    justify-content: center;
    line-height: var(--aura-line-height-m);
    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
    text-decoration: none;
}

.worker-log-action:hover {
    background: var(--vaadin-background-container-strong);
}

.worker-log-action:focus-visible {
    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
    outline-offset: var(--vaadin-focus-ring-width);
}

@media (max-width: 639px) {
    .worker-card {
        padding: var(--vaadin-padding-m);
    }

    .worker-card-meta {
        grid-template-columns: 1fr;
    }

    .worker-assignment {
        align-items: flex-start;
        flex-direction: column;
    }

    .worker-assignment > div:last-child {
        align-items: flex-start;
        text-align: left;
    }

    .tenant-heading-row > *:last-child {
        justify-content: flex-start;
        width: 100%;
    }

    .tenant-customer-card,
    .system-backlinks-card,
    .system-detail-summary {
        padding: var(--vaadin-padding-m);
    }

    .wizard-shell {
        padding: var(--vaadin-padding-m);
    }

    .wizard-step {
        min-height: 0;
    }

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