.ke-rr { display: flex; flex-wrap: wrap; align-content: stretch; height: 100%; min-height: 0; }

.ke-rr-panel {
    flex: 0 1 380px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 20px; padding: 24px; overflow-y: auto;
    border-right: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
}
.ke-rr-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.ke-rr-part { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ke-rr-head { font-size: 0.875rem; font-weight: 600; margin: 0; color: var(--dxds-color-content-neutral-default-rest); }
.ke-rr-for { margin: 0; font-size: 1rem; color: var(--dxds-color-content-neutral-default-rest); }
.ke-rr-note { margin: 0; font-size: 0.875rem; color: var(--dxds-color-content-neutral-subdued-rest); }

.ke-rr-message {
    margin: 0; padding: 12px 16px;
    border: 1px solid var(--dxds-color-border-danger-default-rest);
    border-radius: 8px;
    color: var(--dxds-color-content-danger-default-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
}
.ke-rr > .ke-rr-message, .ke-rr-message:only-child { margin: 24px; }

.ke-rr-warning {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; font-size: 0.875rem;
    border: 1px solid var(--dxds-color-border-warning-default-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}

.ke-rr-reports { display: flex; flex-direction: column; gap: 6px; }
.ke-rr-report {
    font: inherit;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 40px; padding: 0 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: 4px;
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-rr-report:hover { background: var(--dxds-color-surface-neutral-default-hovered); }
.ke-rr-report.on {
    border-color: var(--dxds-color-border-primary-default-rest);
    background: var(--dxds-color-surface-primary-subdued-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    font-weight: 600;
}
.ke-rr-report-row { display: flex; align-items: stretch; gap: 6px; }
.ke-rr-report-row > .ke-rr-report { flex: 1; min-width: 0; }
.ke-rr-star {
    font: inherit; flex: none; width: 40px; cursor: pointer;
    border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: 4px;
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-subdued-rest);
}
.ke-rr-star:hover { background: var(--dxds-color-surface-neutral-default-hovered); }
.ke-rr-star.on { color: var(--dxds-color-content-warning-default-rest); }
.ke-rr-tag { font-size: 0.75rem; font-weight: 400; color: var(--dxds-color-content-neutral-subdued-rest); }

.ke-rr-form { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.ke-rr-form > legend { font-size: 0.875rem; font-weight: 600; padding: 0; margin: 0 0 6px; }
.ke-rr-dates {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: 4px;
    background: var(--dxds-color-surface-neutral-default-rest);
}
.ke-rr-dates > li + li { border-top: 1px solid var(--dxds-color-border-neutral-default-rest); }
.ke-rr-date { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; font-size: 0.875rem; cursor: pointer; }
.ke-rr-date input { width: 18px; height: 18px; margin: 0; }
.ke-rr-date-fixed { justify-content: space-between; cursor: default; }

.ke-rr-select {
    font: inherit; padding: 6px 8px; border-radius: 4px;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-rr-run { align-self: stretch; }
.ke-rr-runbar {
    position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 12px 24px 24px;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
}

.ke-rr-result {
    flex: 999 1 400px; min-width: 0; overflow: auto; padding: 24px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: safe center; gap: 16px;
    background: var(--dxds-color-surface-neutral-subdued-rest);
}
.ke-rr-stale { margin: 0 0 -16px; align-self: stretch; }
.ke-rr-stale:has(> span) { margin: 0; }
.ke-rr-stale > span {
    display: block; max-width: 210mm; margin: 0 auto; padding: 12px 16px; box-sizing: border-box; font-size: 0.875rem;
    border: 1px solid var(--dxds-color-border-warning-default-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-rr-empty { margin: 48px 0 0; max-width: 360px; text-align: center; color: var(--dxds-color-content-neutral-subdued-rest); }
.ke-rr-paper {
    width: 210mm; min-height: 297mm; padding: 18mm 14mm; box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.ke-rr-state {
    display: flex; align-items: center; gap: 8px; align-self: stretch;
    max-width: 210mm; width: 100%; margin: 0 auto; padding: 12px 16px; box-sizing: border-box; font-size: 0.875rem;
    border: 1px solid var(--dxds-color-border-warning-default-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}
.ke-rr-state > i { color: var(--dxds-color-content-warning-default-rest); }
.ke-rr-state.done { border-color: var(--dxds-color-border-success-default-rest); }
.ke-rr-state.done > i { color: var(--dxds-color-content-success-default-rest); }

.ke-rr-signoff {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 210mm; width: 100%; padding: 16px; box-sizing: border-box;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest);
}
.ke-rr-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; }
.ke-rr-checks > li { display: flex; align-items: flex-start; gap: 8px; }
.ke-rr-checks > li > i { flex: none; color: var(--dxds-color-content-success-default-rest); }
.ke-rr-checks > li.warn > i { color: var(--dxds-color-content-warning-default-rest); }
.ke-rr-checks > li.info > i { color: var(--dxds-color-content-neutral-subdued-rest); }
.ke-rr-recovery { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ke-rr-recovery-row { display: flex; align-items: center; gap: 16px; align-self: stretch; }
.ke-rr-recovery-range { flex: 1; min-width: 0; min-height: 24px; margin: 0; accent-color: var(--dxds-color-content-primary-default-rest); }
.ke-rr-recovery-value { flex: none; min-width: 48px; text-align: right; font-size: 0.875rem; font-weight: 600; color: var(--dxds-color-content-neutral-default-rest); }
.ke-rr-note-field { display: flex; flex-direction: column; gap: 4px; }
.ke-rr-note-input {
    width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: 4px; resize: vertical;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
}

@media (min-width: 769px) {
    .ke-rr { flex-wrap: nowrap; }
}

@media (max-width: 768px) {
    .ke-rr-panel { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest); }
    .ke-rr-result { padding: 16px; }
}

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
    .ke-rr { display: block; height: auto; }
    .ke-rr-panel { padding: 24px 16px; gap: 24px; }
    .ke-rr-result { padding: 16px 16px 64px; overflow: visible; }
    .dxbl-btn.ke-rr-run { min-height: 52px; font-size: 1.0625rem; }
    .ke-rr-head, .ke-rr-report, .ke-rr-date, .ke-rr-select { font-size: 1rem; }
    .ke-rr-report { min-height: 48px; }
    .ke-rr-date { min-height: 44px; }
    .ke-rr-date input { width: 20px; height: 20px; }
    .ke-rr-select { min-height: 48px; }
}
