/* ===========================================================================
   Klar feedback blocks (Phase 1, package K3): the confirmation ladder, toasts,
   Jobs & downloads, loading / region / not-found / access / session / connection
   states. Components: frontendlib/Components/Klar/Feedback (README.md there).
   Only theme tokens (--mud-palette-*, --klar-*): every theme, light and dark.
   Linked after assetmanager.frontend.styles.css in both host pages.
   =========================================================================== */

/* --- confirmation ladder (KlarConfirmDialog) -------------------------------- */

.klar-confirm .klar-confirm-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-inline-end: 2rem; /* the close button */
}

.klar-confirm .klar-confirm-question {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-confirm-env.klar-chip {
    letter-spacing: .04em;
}

.klar-confirm-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: .875rem;
}

.klar-confirm-body .klar-confirm-details {
    margin: 0;
    max-height: 16rem;
    color: var(--mud-palette-text-primary);
    font-size: .875rem;
}

.klar-confirm-body .klar-confirm-details li + li {
    margin-top: .25rem;
}

.klar-confirm-message {
    margin: 0;
}

.klar-confirm-line {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* MA-4: the backup step switched off says what it means, in the warning colour */
.klar-db-backup.is-off .mud-checkbox .mud-typography {
    color: var(--mud-palette-warning-darken);
}

/* MA-3 ④: the steps of the restore */
.klar-restore-steps li.is-waiting {
    color: var(--mud-palette-text-secondary);
}

.klar-confirm-line .mud-icon-root {
    flex: none;
    margin-top: .125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-confirm-reason .mud-input-control {
    margin-top: 0;
}

/* level 2: the counts of the dry run as tiles, zeros muted */
.klar-impact-label {
    margin-bottom: .375rem;
    padding: 0;
    font-size: .75rem;
    font-weight: 650;
    color: var(--mud-palette-text-secondary);
}

.klar-impact-counts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-impact-count {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .625rem;
    border-radius: var(--klar-radius-control);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, var(--klar-hairline));
    background-color: color-mix(in srgb, var(--mud-palette-error) 7%, var(--mud-palette-surface));
}

.klar-impact-count b {
    font-family: var(--klar-font-display);
    font-size: 1.125rem;
    line-height: 1.2;
    color: color-mix(in srgb, var(--mud-palette-error) 75%, var(--mud-palette-text-primary));
}

.klar-impact-count span {
    font-size: .75rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.klar-impact-count.is-zero {
    border-color: var(--klar-hairline);
    background-color: var(--mud-palette-background-gray);
}

.klar-impact-count.is-zero b,
.klar-impact-count.is-zero span {
    color: var(--mud-palette-text-secondary);
}

.klar-impact-note {
    margin-top: .375rem;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.klar-impact-options {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.klar-impact-options .mud-radio-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-impact-option {
    padding: .375rem .75rem .5rem;
    border-radius: var(--klar-radius-control);
    border: 1px solid var(--klar-hairline);
    transition: border-color var(--klar-micro) ease, background-color var(--klar-micro) ease;
}

.klar-impact-option.is-on {
    border-color: var(--klar-primary-ink);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.klar-impact-option.is-danger.is-on {
    border-color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--klar-hairline));
    background-color: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

.klar-impact-option-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.klar-impact-option-head .mud-radio {
    margin: 0;
}

.klar-impact-option-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.klar-impact-option-desc {
    margin: 0 0 .25rem 2.25rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-impact-option .klar-typed {
    margin: .5rem 0 0 2.25rem;
}

/* the input of the chosen option (DE-7: the type the products move to, its conflicts) */
.klar-impact-option-content {
    margin: .5rem 0 .25rem 2.25rem;
}

/* level 3: what is lost, the backup step */
.klar-db-loss {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .625rem .75rem;
    border-radius: var(--klar-radius-control);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, var(--klar-hairline));
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.klar-db-loss b {
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.klar-db-backup {
    display: flex;
    flex-direction: column;
}

.klar-db-backup .mud-checkbox {
    margin-inline-start: -.5rem;
}

.klar-db-hint {
    margin-inline-start: 2rem;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* "type the name to confirm", checked while typing */
.klar-typed-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* 28rem: the German label ("Zur Bestätigung den Namen der Datenbank eingeben") fits without an ellipsis */
.klar-typed-input {
    flex: 1 1 14rem;
    max-width: 28rem;
}

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

/* the notch of an outlined field (its legend) is 0 px wide until the label floats: with a long label ("Type the name
   of the database to confirm") every word wrapped and the confirmation got a scroll bar for nothing */
.klar-confirm-content .mud-input-outlined-border legend {
    white-space: nowrap;
}

.klar-typed-state {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 600;
}

.klar-typed-state.is-match {
    color: color-mix(in srgb, var(--mud-palette-success) 75%, var(--mud-palette-text-primary));
}

.klar-typed-state.is-mismatch {
    color: var(--mud-palette-text-secondary);
}

.klar-typed-hint {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* --- toasts (IKlarToasts): one line, one action, bottom centre of the content -- */

.klar-toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    max-width: min(40rem, calc(100vw - 7rem));
}

.klar-toast-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.klar-toast-action.mud-button-root {
    flex: none;
    margin-inline-start: auto;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* beside the rail, not over it: the content area starts after the open drawer */
@media (min-width: 960px) {
    body:has(.mud-drawer--open.mud-drawer-pos-left:not(.mud-drawer-temporary)) .mud-snackbar-location-bottom-center {
        left: calc(50% + var(--mud-drawer-width-left, 240px) / 2);
    }
}

/* --- Jobs & downloads (JobsPanel, JobsDrawer, JobsButton) ------------------- */

/* a side panel on the page's surface, not in the navigation drawer's colours (a purple drawer in some themes) */
.klar-jobs-drawer.mud-drawer {
    max-width: 100vw;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.klar-jobs {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 100%;
    padding: .75rem 1rem 1rem;
}

.klar-jobs-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.klar-jobs-title {
    margin: 0;
    font-family: var(--klar-font-display);
    font-size: 1.0625rem;
    font-weight: 650;
}

.klar-jobs-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .375rem;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.klar-jobs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    overflow: hidden;
}

.klar-job {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .625rem .75rem;
    background-color: var(--mud-palette-surface);
}

.klar-job + .klar-job {
    border-top: 1px solid var(--klar-hairline);
}

.klar-job-icon {
    flex: none;
    margin-top: .125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-job-failed .klar-job-icon {
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.klar-job-main {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.klar-job-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.klar-job-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8125rem;
    font-weight: 600;
}

.klar-job-title.klar-mono {
    font-family: var(--klar-font-mono);
    font-weight: 500;
}

.klar-job-percent,
.klar-job-meta,
.klar-job-status {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.klar-job-status,
.klar-job-meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.klar-job-reason {
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.klar-job-details {
    margin: .25rem 0 0;
    padding: .5rem;
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-background-gray);
    font-size: .75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* MA-6: the report per row of an import */
.klar-job-report-toggle {
    align-self: flex-start;
}

.klar-job-report {
    margin: .25rem 0 0;
    padding: .5rem .5rem .5rem 1.25rem;
    max-height: 16rem;
    overflow-y: auto;
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-background-gray);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.klar-jobs-foot {
    margin-top: auto;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .klar-jobs-drawer.mud-drawer {
        width: 100vw !important;
    }
}

/* --- loading (KlarLoading) ------------------------------------------------- */

.klar-loading {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .25rem 0;
}

.klar-skel-head {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: .5rem;
}

.klar-skel-rows,
.klar-skel-lines,
.klar-skel-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.klar-skel-card {
    padding: .875rem 1rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
}

.klar-loading-slow {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .klar-loading .mud-skeleton {
        animation: none;
    }
}

/* --- regions (KlarRegion) and inline problems -------------------------------- */

.klar-region {
    min-width: 0;
}

.klar-region-cancelled {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-problem-inline {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .875rem;
    border-radius: var(--klar-radius-control);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, var(--klar-hairline));
    background-color: color-mix(in srgb, var(--mud-palette-error) 5%, var(--mud-palette-surface));
    text-align: start;
}

.klar-problem-inline:has(.klar-tone-warning) {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--klar-hairline));
    background-color: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface));
}

.klar-problem-inline > .klar-problem-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--klar-radius-control);
}

.klar-problem-inline .klar-problem-main {
    flex: 1 1 auto;
    min-width: 0;
}

.klar-problem-inline .klar-problem-title {
    margin: 0 0 .25rem;
    font-size: .9375rem;
}

.klar-problem-inline .klar-problem-text p:last-child {
    margin-bottom: 0;
}

.klar-problem-inline .klar-problem-actions {
    justify-content: flex-start;
    margin-top: .5rem;
}

/* --- not found (NotFoundState) --------------------------------------------- */

.klar-tombstone {
    padding: .5rem .75rem;
    border-radius: var(--klar-radius-control);
    border-inline-start: 3px solid var(--mud-palette-text-disabled);
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    text-align: start;
}

/* --- connection lost (KlarReconnectOverlay, web host only) ------------------- */

#components-reconnect-modal.klar-reconnect {
    display: none;
}

#components-reconnect-modal.klar-reconnect.components-reconnect-show,
#components-reconnect-modal.klar-reconnect.components-reconnect-retrying,
#components-reconnect-modal.klar-reconnect.components-reconnect-paused,
#components-reconnect-modal.klar-reconnect.components-reconnect-failed,
#components-reconnect-modal.klar-reconnect.components-reconnect-resume-failed,
#components-reconnect-modal.klar-reconnect.components-reconnect-rejected {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: start center;
    padding: 6rem 1rem 1rem;
    background-color: color-mix(in srgb, var(--mud-palette-background, #fff) 55%, transparent);
    font-family: var(--klar-font-ui, system-ui, sans-serif);
}

.klar-reconnect-box {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: min(24rem, 100%);
    padding: 1rem 1.125rem;
    border-radius: 14px;
    border: 1px solid var(--klar-hairline, rgba(0, 0, 0, .12));
    background-color: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1f2937);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 24px 64px -20px rgba(0, 0, 0, .4);
}

.klar-reconnect-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.klar-reconnect-icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.klar-reconnect-text {
    margin: 0;
    font-size: .8125rem;
}

.klar-reconnect-progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--mud-palette-background-gray, #eee);
}

.klar-reconnect-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 2px;
    background-color: var(--mud-palette-primary, #16718b);
    animation: klar-reconnect-slide 1.4s ease-in-out infinite;
}

@keyframes klar-reconnect-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .klar-reconnect-progress i {
        animation: none;
        width: 100%;
        opacity: .4;
    }
}

.klar-reconnect-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.klar-reconnect-button {
    min-height: 2.25rem;
    padding: 0 .875rem;
    border-radius: var(--klar-radius-control, 10px);
    border: 1px solid var(--klar-primary-ink, #16718b);
    background: transparent;
    color: var(--klar-primary-ink, #16718b);
    font: 600 .8125rem/1 var(--klar-font-ui, system-ui, sans-serif);
    cursor: pointer;
}

.klar-reconnect-button:focus-visible {
    outline: 2px solid var(--klar-accent, #21a9cf);
    outline-offset: 2px;
}

.klar-reconnect-reload {
    border-color: transparent;
    background-color: var(--mud-palette-primary, #16718b);
    color: var(--mud-palette-primary-text, #fff);
}

/* which texts and buttons show in which state */
.klar-reconnect .klar-reconnect-when-failed,
.klar-reconnect .klar-reconnect-when-rejected,
.klar-reconnect .klar-reconnect-retry,
.klar-reconnect .klar-reconnect-reload {
    display: none;
}

.klar-reconnect.components-reconnect-failed .klar-reconnect-when-trying,
.klar-reconnect.components-reconnect-resume-failed .klar-reconnect-when-trying,
.klar-reconnect.components-reconnect-rejected .klar-reconnect-when-trying {
    display: none;
}

.klar-reconnect.components-reconnect-failed .klar-reconnect-when-failed,
.klar-reconnect.components-reconnect-failed .klar-reconnect-retry,
.klar-reconnect.components-reconnect-failed .klar-reconnect-reload,
.klar-reconnect.components-reconnect-paused .klar-reconnect-retry,
.klar-reconnect.components-reconnect-resume-failed .klar-reconnect-when-rejected,
.klar-reconnect.components-reconnect-resume-failed .klar-reconnect-reload,
.klar-reconnect.components-reconnect-rejected .klar-reconnect-when-rejected,
.klar-reconnect.components-reconnect-rejected .klar-reconnect-reload {
    display: inline-block;
}

/* while it is still trying: "Reload now" is offered after 30 s (no script needed while the circuit is gone) */
.klar-reconnect.components-reconnect-show .klar-reconnect-reload,
.klar-reconnect.components-reconnect-retrying .klar-reconnect-reload {
    display: inline-block;
    visibility: hidden;
    animation: klar-reconnect-offer 0s linear 30s forwards;
}

@keyframes klar-reconnect-offer {
    to { visibility: visible; }
}

/* a static copy on the demo page (PreviewState): no id, so Blazor never uses it */
.klar-reconnect.klar-reconnect-preview {
    display: block;
}

/* --- demo page /dev/klar/feedback (Development only) ---------------------------- */

.klar-fbdemo-intro {
    margin-bottom: .25rem;
}

.klar-fbdemo-h1 {
    font-family: var(--klar-font-display);
    font-size: 1.25rem;
    font-weight: 650;
}

.klar-fbdemo-section {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin-top: .5rem;
}

.klar-fbdemo-caption {
    margin: .25rem 0 -.375rem;
    font-weight: 600;
}

.klar-fbdemo-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.klar-fbdemo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: .875rem;
    align-items: start;
}

.klar-fbdemo-answer {
    padding: .5rem .75rem;
    border-radius: var(--klar-radius-control);
    border: 1px solid var(--klar-hairline);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.klar-fbdemo-radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

.klar-fbdemo-label {
    font-weight: 600;
}

.klar-fbdemo-panel {
    max-width: 400px;
    border-radius: var(--klar-radius-card);
    overflow: hidden;
}

.klar-fbdemo-link {
    display: inline-block;
    margin-top: .5rem;
}