/**
 * DevBuild Form - Base Styles
 *
 * Minimal, non-opinionated styles for easy theme customization.
 */

/* Form reset */
.dbf-form {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 100%;
}

.dbf-form *,
.dbf-form *::before,
.dbf-form *::after {
    box-sizing: inherit;
}

/* Row layout */
.dbf-form_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1.5em;
}

.dbf-form_col-label {
    flex: 0 0 200px;
    padding: 0.5em 1em 0.5em 0;
    font-weight: bold;
}

.dbf-form_col-input,
.dbf-form_col-value {
    flex: 1 1 0%;
    min-width: 0;
}

.dbf-form_col-button {
    flex: 1 1 100%;
    display: flex;
    gap: 0.5em;
    justify-content: center;
    padding-top: 1em;
}

/* Input fields */
.dbf-form_input {
    display: block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.5;
    background-color: #fff;
}

.dbf-form_input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Error states */
.dbf-is-error {
    border-color: #dc3232;
}

.dbf-is-error:focus {
    border-color: #dc3232;
    box-shadow: 0 0 0 1px #dc3232;
}

.dbf-field-error {
    margin-top: 0.25em;
}

.dbf-field-error p {
    margin: 0;
    color: #dc3232;
    font-size: 0.875em;
}

/* tmp 永続化済み添付ファイルの通知ブロック */
.dbf-file-attached {
    margin-bottom: 0.5em;
    padding: 0.5em 0.75em;
    border: 1px solid #c3d9ed;
    border-radius: 3px;
}

.dbf-file-attached_name {
    margin: 0;
    font-size: 0.95em;
}

.dbf-file-attached_note {
    margin: 0.25em 0 0;
    color: #555;
    font-size: 0.825em;
}

/* Checkbox / Radio groups */
.dbf-checkbox-group,
.dbf-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
}

/* layout="vertical" 指定時は縦並びにする */
.dbf-checkbox-group--vertical,
.dbf-radio-group--vertical {
    flex-direction: column;
    gap: 0.5em;
}

.dbf-checkbox-group label,
.dbf-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    cursor: pointer;
}

/* Field values (confirm screen) */
.dbf-field-value {
    display: inline-block;
    padding: 0.5em 0;
}

.dbf-field-value--list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dbf-field-value--list li {
    padding: 0.25em 0;
}

/* Error page */
.dbf-error {
    padding: 1em;
    border: 1px solid #dc3232;
    border-radius: 4px;
    background-color: #fef1f1;
    color: #dc3232;
}

/* Loading state */
.dbf-is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.dbf-is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dbf-spin 0.6s linear infinite;
    /* ボタンの元の文字色をスピナーに使う */
    color: inherit;
}

/* ボタンが disabled かつ loading 中のスピナー色を確保する */
button.dbf-is-loading::after {
    color: #333;
}

@keyframes dbf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive: stack at 768px */
@media (max-width: 768px) {
    .dbf-form_row {
        flex-direction: column;
    }

    .dbf-form_col-label {
        flex: none;
        padding: 0 0 0.25em 0;
    }

    .dbf-form_col-button {
        flex-direction: column;
    }
}