/*
 * 編集ダイアログ (specification 43).
 *
 * Loaded on every screen, on both surfaces, so the daily grid's detail dialog,
 * the student editor and the contract editor are the same box. Moved here out
 * of reservation-grid.css, where it had lived because there was only one.
 *
 * Only plugin classes are styled. The one rule that touches a document element
 * — the scroll lock — fires solely when this plugin's JavaScript has added its
 * own class, and is gone the moment the dialog closes.
 */

.c2sr-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 12px;
    background: rgba(0, 0, 0, 0.45);
    /* A last resort. The dialog scrolls its own body; this only matters if a
       browser cannot honour the max-height below. */
    overflow-y: auto;
}

/*
 * The box.
 *
 * A column, so the heading can stay while the body scrolls. `min-height: 0` on
 * the body is what actually permits that — a flex item's automatic minimum is
 * its content, and without it the body grows and the whole dialog runs off the
 * bottom of the screen instead (the same rule that made 37.2 what it was).
 */
.c2sr-dialog {
    display: flex;
    flex-direction: column;
    width: min(860px, 100%);
    max-width: 100%;
    max-height: 85vh;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.c2sr-dialog-head {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #dcdcde;
}

.c2sr-dialog-head h2 {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.4;
}

.c2sr-dialog-body {
    min-width: 0;
    min-height: 0;
    padding: 4px 20px 20px;
    overflow-x: hidden;
    /* 縦へ伸ばす。横スクロールを基本解決策にしない（43.5）。 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.button.c2sr-dialog-close {
    min-height: 40px;
    line-height: 38px;
}

/*
 * Nothing inside a dialog may be wider than the dialog. A `regular-text` input
 * is 25em, which is wider than a phone.
 */
.c2sr-dialog-body input,
.c2sr-dialog-body select,
.c2sr-dialog-body textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.c2sr-dialog-body .form-table th {
    width: 12em;
}

.c2sr-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f0f0f1;
}

/*
 * A dialog that can be scrolled behind is not a modal. The class is added by
 * this plugin's script when a dialog is present and removed when it closes, so
 * this never applies to a page that has no dialog on it.
 */
html.c2sr-modal-open,
html.c2sr-modal-open body {
    overflow: hidden;
}

/*
 * 拒否された理由を、ダイアログの中で読ませる（specification 77.6）。
 *
 * 通知はページ先頭にもある。しかしこの背景は `position: fixed; inset: 0` で
 * 全面を覆い、上の規則でページのスクロールまで止める——つまり**外に出ている
 * 通知は、開いている間そこに無いのと同じ**である。だから同じ文言をここにも
 * 置く。上に余白を足すのは、見出しの直下に赤い箱が貼り付くのを避けるため。
 */
.c2sr-dialog-notice {
    margin: 12px 0 4px;
}

/*
 * Narrow screens: nearly the whole viewport, and stacked.
 *
 * `100vw` would include the scrollbar's width on a desktop browser narrowed to
 * this size and overflow by that much; the gutter is subtracted for the same
 * reason. `dvh` follows the address bar on iOS instead of hiding the buttons
 * behind it, with `vh` left as the fallback above it.
 */
@media (max-width: 782px) {
    .c2sr-dialog-backdrop {
        padding: 8px;
    }

    .c2sr-dialog {
        width: calc(100vw - 16px);
        max-width: none;
        max-height: 85vh;
        max-height: calc(100dvh - 16px);
    }

    .c2sr-dialog-head,
    .c2sr-dialog-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .c2sr-dialog-body .form-table,
    .c2sr-dialog-body .form-table tbody,
    .c2sr-dialog-body .form-table tr,
    .c2sr-dialog-body .form-table th,
    .c2sr-dialog-body .form-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .c2sr-dialog-body .form-table th {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .c2sr-dialog-body input[type="text"],
    .c2sr-dialog-body input[type="search"],
    .c2sr-dialog-body input[type="date"],
    .c2sr-dialog-body input[type="number"],
    .c2sr-dialog-body select,
    .c2sr-dialog-body textarea {
        width: 100%;
    }

    .c2sr-dialog-actions {
        justify-content: stretch;
    }

    .c2sr-dialog-actions .button {
        flex: 1 1 auto;
        text-align: center;
    }
}

/*
 * iOS zooms a focused field whose text is under 16px. Sizing every control in a
 * dialog at 16px is what stops the page jumping when staff tap into 契約時間 on
 * an iPhone — the same rule the dashboard already applies to its own inputs.
 */
@media (max-width: 782px) {
    .c2sr-dialog-body input,
    .c2sr-dialog-body select,
    .c2sr-dialog-body textarea {
        font-size: 16px;
    }
}