body.readonly input[type="text"]:not(.biz_editable) ,
body.readonly input[type="date"]:not(.biz_editable) ,
body.readonly input[type="time"]:not(.biz_editable) ,
body.readonly .item_table:not(.biz_editable) ,
body.readonly textarea:not(.biz_editable) ,
body.readonly select:not(.biz_editable)  {
    background-color: transparent;
}

body.readonly input[type="file"] {
    display: none;
}

input[type="file"] {
    display: none;
}

.search_item_wrapper {
    overflow-y: auto;
}

.search_modal {
    width: 85% !important;
    height: 85% !important;
    min-height: 85% !important;
}

.modal_container {
    padding: 1em 2em;
}

.person::after {
    content: "名";
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: 5px;
}

select:disabled {
    background-color: #eee !important;
}

.report_work_action_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.report_footer_print_row {
    margin-top: 0.5rem;
}

.btn.report_entry_btn,
.btn.report_exit_btn,
.btn.report_work_complete_btn {
    background-color: #2185d0;
}

.btn.report_entry_btn:hover,
.btn.report_exit_btn:hover,
.btn.report_work_complete_btn:hover {
    background-color: #1a69a4;
}

.btn.report_entry_btn::before {
    content: "入場";
}

.btn.report_exit_btn::before {
    content: "退場";
}

.btn.report_work_complete_btn::before {
    content: "完了";
}

/* ===== スマホ・狭幅（F-39）=====
   顧客詳細（customerdetail.css）と同方針。グリッドは stackable で縦に積み、
   表は列を維持したまま table-wrap で横スクロールする。 */

@media (max-width: 768px) {
    .report_detail_page {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .report_detail_page .ui.main.container.fixed_header.report_page {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }

    /* ヘッダー固定をやめて通常フローに戻す。
       ボタンが折り返して高さが変わっても本文が隠れないようにするため */
    .report_detail_page .main.fixed_header .header {
        position: static;
        width: 100% !important;
        max-width: 100% !important;
        left: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .report_detail_page .main.fixed_header main {
        margin-top: 0;
    }

    .report_detail_page h2.ui.dividing.header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .report_detail_page h2.ui.dividing.header .btn_wrap {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* stackable の既定 padding だと縦に間延びする */
    .report_detail_page .ui.stackable.grid > .column:not(.row) {
        padding: 0.5rem 0 !important;
    }

    /* dl.gridtable は固定ピクセル列なので、狭幅では1列に積む */
    .report_detail_page .gridtable.cols-2,
    .report_detail_page .gridtable.cols-4,
    .report_detail_page .gridtable.cols-6 {
        grid-template-columns: minmax(0, 1fr);
    }

    .report_detail_page .gridtable .span1col,
    .report_detail_page .gridtable .span3col,
    .report_detail_page .gridtable .span5col {
        grid-column: auto;
    }

    .report_detail_page .gridtable dt {
        margin-top: 0.5rem;
    }

    .report_detail_page .gridtable dt:first-child {
        margin-top: 0;
    }

    .report_detail_page .gridtable dt,
    .report_detail_page .gridtable dd {
        min-width: 0;
        align-items: flex-start;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .report_detail_page .gridtable dd ol {
        font-size: 0.9rem;
        padding-left: 1.2em;
        margin: 0;
    }

    /* 結果報告の入力：3ペア横並びをラベル＋入力の2列に */
    .report_detail_page .gridtable.custom_manager {
        grid-template-columns: 8.5em minmax(0, 1fr);
    }

    .report_detail_page .gridtable.custom_manager dt.text-right {
        text-align: left;
        justify-content: flex-start;
    }

    .report_detail_page .gridtable.custom_manager select,
    .report_detail_page .gridtable.custom_manager input[type="text"],
    .report_detail_page .gridtable.custom_manager input[type="date"],
    .report_detail_page .gridtable.custom_manager input[type="time"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 「他 ○名」は入力欄を伸ばし、単位を右に残す */
    .report_detail_page .gridtable.custom_manager dd.person input {
        flex: 1 1 auto;
    }

    .report_detail_page textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .report_detail_page .commentbox {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .report_detail_page .commentbox + .commentbox {
        margin-left: 0;
    }

    /* 表は列を維持して横スクロール（ADR-0009） */
    .report_detail_page .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .report_detail_page .table-wrap table.ui.table th,
    .report_detail_page .table-wrap table.ui.table td {
        white-space: normal;
    }

    .report_detail_page .report_head_table {
        min-width: 760px;
    }

    /* 作業代金は現場で入力するので、入力欄が潰れない幅を確保する */
    .report_detail_page .item_table {
        min-width: 900px;
    }

    .report_detail_page .construct_table {
        min-width: 720px;
    }

    .report_detail_page .est_table {
        min-width: 520px;
    }

    .report_detail_page .device_table {
        min-width: 1280px;
    }

    .report_detail_page .deal_table {
        min-width: 1120px;
    }

    .report_detail_page .prospect_table {
        min-width: 1040px;
    }

    .report_detail_page .ob_table {
        min-width: 1040px;
    }

    .report_detail_page .attach_file_name {
        word-break: break-all;
    }

    /* 領収書・入金日などのラベル付き入力。
       縦積みは Semantic が 767px 以下でやるので、中身がはみ出さない幅だけ整える */
    .report_detail_page .paymentdetail.fields .ui.labeled.input > select,
    .report_detail_page .paymentdetail.fields .ui.labeled.input > input {
        min-width: 0;
        flex: 1 1 auto;
    }

    .report_detail_page .sign_area .image img {
        max-width: 100%;
        height: auto;
    }
}

/* モーダルは表示時に body 配下へ移るため、ページクラスの外でも幅を効かせる */
@media (max-width: 768px) {
    .ui.modal.modal_signature,
    .ui.modal.modal_approval,
    .ui.modal.modal_print,
    .ui.modal.modal_password {
        width: min(94vw, 600px) !important;
    }

    .ui.modal.search_modal {
        width: 96% !important;
    }

    .ui.modal .modal_container {
        padding: 1em;
    }

    .ui.modal .search_item_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ui.modal .est_item_list_table {
        min-width: 720px;
    }

    .ui.modal .sr_item_list_table {
        min-width: 640px;
    }
}

@media (max-width: 500px) {
    .report_detail_page .ui.main.container.fixed_header.report_page {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* この幅ではラベルと入力を上下に置かないと入力欄が読めない */
    .report_detail_page .gridtable.custom_manager {
        grid-template-columns: minmax(0, 1fr);
    }

    .report_detail_page .gridtable.custom_manager dt {
        margin-top: 0.5rem;
    }

    .report_detail_page .gridtable.custom_manager dt:first-child {
        margin-top: 0;
    }

    .report_detail_page h2.ui.dividing.header .btn_wrap .btn {
        margin-right: 0;
    }

    /* original.css が 500px 以下でヘッダーに左右 1rem を足すため、
       コンテナ側の padding と二重になる。詳細度を上げて打ち消す */
    .report_detail_page div.main.container.fixed_header.report_page .ui.dividing.header {
        padding-left: 0;
        padding-right: 0;
    }
}