/* ===============================
   データバックアップ
================================ */

.backup-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 22px;
    margin-bottom: 22px;
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface-muted);
}

.backup-info h3 {
    margin: 0 0 6px;
}

.backup-info p {
    margin: 0;

    color: var(--muted);

    font-size: 0.88rem;
    line-height: 1.6;
}

.backup-panel .button {
    flex-shrink: 0;
    white-space: nowrap;
}

@media screen and (max-width: 640px) {

    .backup-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .backup-panel .button {
        width: 100%;
    }

}

/* ===============================
   バックアップ復元
================================ */

.restore-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
    padding: 18px;

    border: 1px solid #efc5c5;
    border-radius: 14px;

    background: #fff8f8;
}

.restore-info {
    flex: 1;
}

.restore-info h3 {
    margin: 0 0 6px;
}

.restore-info p {
    margin: 0;

    color: var(--muted);

    font-size: 0.88rem;
    line-height: 1.6;
}

.restore-info .restore-warning {
    margin-top: 8px;

    color: var(--danger);

    font-weight: 700;
}

.restore-controls {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
}

.restore-controls input[type="file"] {
    max-width: 260px;
    padding: 9px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;
}

@media screen and (max-width: 760px) {

    .restore-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .restore-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .restore-controls input[type="file"] {
        width: 100%;
        max-width: none;
    }

    .restore-controls .button {
        width: 100%;
    }

}

/* ===============================
   操作履歴
================================ */

.audit-panel {
    margin-top: 26px;
    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.audit-panel .section-heading-between {
    margin-bottom: 16px;
}

.audit-panel .section-heading {
    margin-bottom: 0;
}

.audit-panel td {
    max-width: 360px;

    white-space: normal;
    word-break: break-word;

    font-size: 0.82rem;
}

.audit-action {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    background: #edf3ff;
    color: var(--primary);

    font-size: 0.72rem;
    font-weight: 800;
}

.audit-action.danger {
    background: #fff0f0;
    color: var(--danger);
}

.audit-action.warning {
    background: #fff6df;
    color: #8a5a00;
}

@media screen and (max-width: 760px) {

    .audit-panel .section-heading-between {
        align-items: stretch;
    }

    .audit-panel .section-heading-between > .button {
        width: 100%;
    }

}