/*
 * Responsive helpers for the therapy record features.
 * All selectors are scoped so legacy forms outside these features are unchanged.
 */

.therapy-rwd .therapy-option-item {
    display: block;
}

@media only screen and (max-width: 1024px) {
    .therapy-rwd > .footable th.therapy-rwd-compact,
    .therapy-rwd > .footable td.therapy-rwd-compact {
        min-width: 54px;
        white-space: nowrap;
        width: 1% !important;
    }
}

@media only screen and (max-width: 767px) {
    body.therapy-rwd-active #main-content {
        margin-left: 0 !important;
        padding-bottom: 58px;
    }

    body.therapy-rwd-active #hoe-left-panel {
        display: none !important;
        left: 0;
        max-width: 85vw;
        width: 300px;
    }

    body.therapy-rwd-active #hoe-left-panel.therapy-mobile-open {
        display: block !important;
    }

    body.therapy-rwd-active .aside-menu {
        bottom: 8px;
        left: auto;
        max-width: calc(100% - 16px);
        overflow-x: auto;
        right: 8px;
        top: auto;
        width: auto;
    }

    body.therapy-rwd-active .aside-menu ul {
        flex-direction: row;
        justify-content: flex-end;
    }

    body.therapy-rwd-active .aside-menu ul li {
        flex: 0 0 auto;
    }

    body.therapy-rwd-active .aside-menu ul li a {
        border-radius: 5px;
        letter-spacing: 0;
        min-height: 42px;
        padding: 8px 10px;
        writing-mode: horizontal-tb;
    }

    .therapy-rwd {
        max-width: 100%;
        overflow-x: visible;
    }

    .therapy-rwd > .edit-table {
        border: 0;
        display: block;
        table-layout: fixed;
        width: 100%;
    }

    .therapy-rwd > .edit-table > tbody {
        display: block;
        width: 100%;
    }

    .therapy-rwd > .edit-table > tbody > tr {
        align-items: stretch;
        border: 1px solid var(--border-color, #dddddd);
        display: grid;
        grid-template-columns: minmax(112px, 28%) minmax(0, 1fr);
        height: auto !important;
        margin-bottom: 6px;
        width: 100%;
    }

    .therapy-rwd > .edit-table > tbody > tr > th,
    .therapy-rwd > .edit-table > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        height: auto !important;
        max-width: 100%;
        text-align: left !important;
        white-space: normal !important;
        width: auto !important;
    }

    .therapy-rwd > .edit-table > tbody > tr > th {
        background-color: var(--gray-color-100, #f5f5f5);
        border-bottom: 1px solid var(--border-color, #dddddd);
        padding: 7px 9px;
    }

    .therapy-rwd > .edit-table > tbody > tr > td {
        min-width: 0;
        overflow: visible;
        padding: 8px 9px;
    }

    .therapy-rwd input[type="text"],
    .therapy-rwd input[type="date"],
    .therapy-rwd input[type="datetime-local"],
    .therapy-rwd input[type="email"],
    .therapy-rwd input[type="number"],
    .therapy-rwd input[type="search"],
    .therapy-rwd input[type="tel"],
    .therapy-rwd input[type="time"],
    .therapy-rwd input[type="url"],
    .therapy-rwd select,
    .therapy-rwd textarea {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    .therapy-rwd textarea,
    .therapy-rwd > .edit-table > tbody > tr > td > input[type="text"],
    .therapy-rwd > .edit-table > tbody > tr > td > select {
        width: 100% !important;
    }

    .therapy-rwd table table {
        max-width: 100%;
        width: 100% !important;
    }

    .therapy-rwd table table th,
    .therapy-rwd table table td,
    .therapy-rwd table table div {
        box-sizing: border-box;
        height: auto !important;
        max-width: 100%;
        white-space: normal !important;
        word-break: break-word;
    }

    .therapy-rwd table table tr {
        height: auto !important;
    }

    .therapy-rwd table table textarea,
    .therapy-rwd table table input[type="text"] {
        max-width: 100% !important;
    }

    .therapy-rwd .therapy-option-table > tbody > tr {
        display: block;
        width: 100%;
    }

    .therapy-rwd .therapy-option-table,
    .therapy-rwd .therapy-option-table > tbody,
    .therapy-rwd .therapy-eval-table,
    .therapy-rwd .therapy-eval-table > tbody,
    .therapy-rwd .therapy-target-table,
    .therapy-rwd .therapy-target-table > tbody {
        display: block;
        width: 100% !important;
    }

    .therapy-rwd .therapy-option-table > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        line-height: 1.5;
        padding: 4px 0;
        width: 100% !important;
    }

    .therapy-rwd .therapy-option-item {
        align-items: flex-start;
        display: flex;
        gap: 6px;
        margin-bottom: 6px;
        white-space: normal;
    }

    .therapy-rwd .therapy-option-item > input[type="checkbox"] {
        flex: 0 0 auto;
        margin-top: 4px;
    }

    .therapy-rwd .therapy-option-item > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .therapy-rwd .therapy-eval-table > tbody > tr {
        align-items: start;
        display: grid;
        grid-template-columns: minmax(112px, 28%) minmax(0, 1fr);
        width: 100%;
    }

    .therapy-rwd .therapy-eval-table > tbody > tr > td {
        box-sizing: border-box;
        display: block;
        min-width: 0;
        padding: 5px;
        white-space: normal !important;
        width: auto !important;
    }

    .therapy-rwd .therapy-eval-table > tbody > tr > td[colspan] {
        grid-column: 1 / -1;
    }

    .therapy-rwd .therapy-target-group-title {
        background-color: var(--gray-color-100, #f5f5f5);
        display: block;
        font-weight: bold;
        margin: -6px -6px 6px;
        padding: 6px;
    }

    .therapy-rwd .therapy-target-table > tbody > tr:first-child {
        display: none;
    }

    .therapy-rwd .therapy-target-table > tbody > tr:last-child,
    .therapy-rwd .therapy-target-table > tbody > tr:last-child > td {
        display: block;
        width: 100% !important;
    }

    .therapy-rwd .therapy-target-table > tbody > tr:last-child > td {
        border-bottom: 1px solid var(--border-color, #dddddd);
        padding: 8px;
    }

    .therapy-rwd > .footable {
        width: 100%;
    }

    .therapy-rwd > .footable.breakpoint > tbody > tr > td.expand {
        cursor: pointer;
        min-width: 34px;
    }

    .therapy-rwd .stt-train-table,
    .therapy-rwd .stt-train-table > tbody,
    .therapy-rwd .stt-train-table > tbody > tr,
    .therapy-rwd .trn-train-table,
    .therapy-rwd .trn-train-table > tbody,
    .therapy-rwd .trn-train-table > tbody > tr {
        display: block;
        width: 100% !important;
    }

    .therapy-rwd .stt-train-table > tbody > tr > td,
    .therapy-rwd .trn-train-table > tbody > tr > td {
        display: block;
        padding: 0;
        width: 100% !important;
    }

    .therapy-rwd .stt-item,
    .therapy-rwd .trn-item {
        border-bottom: 1px solid var(--border-color, #eeeeee);
        min-height: 44px;
        padding: 7px 0;
        white-space: normal;
    }

    .therapy-rwd .stt-last-date {
        display: block;
        margin-left: 28px;
    }

    .therapy-rwd .trn-head {
        padding-left: 0;
        text-align: right;
        white-space: normal;
    }

    .therapy-rwd .trn-head span {
        width: 58px;
    }

    .therapy-rwd-pager > div {
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .therapy-rwd-pager > div > div:first-child {
        align-items: center;
        flex-wrap: wrap;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .therapy-rwd-pager > div > div:last-child {
        margin-left: 0 !important;
    }
}

@media only screen and (min-width: 768px) {
    .therapy-rwd .therapy-target-group-title {
        display: none;
    }
}

@media only screen and (max-width: 359px) {
    .therapy-rwd > .edit-table > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }

    .therapy-rwd .therapy-eval-table > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }
}