/* Phone-width comfort plus one site-wide piece: button styling. Everything else sits
   behind a media query, so desktop rendering is otherwise untouched. The full portal
   restyle lives on the develop line; this is the safe subset for production. */

/* Buttons carried no CSS at all, so every platform painted its own default: gray classic
   on desktop, blue pills on iOS. One explicit style, keyed to the site's header green. */
input[type=submit],
input[type=button],
button {
    -webkit-appearance: none;
    appearance: none;
    background: #4e7d33;
    color: #ffffff;
    border: 1px solid #446e2c;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
    background: #446e2c;
}

input[type=submit]:disabled,
input[type=button]:disabled,
button:disabled {
    background: #9db98c;
    border-color: #9db98c;
}

@media (max-width: 640px) {

    /* iOS zooms the whole page when a focused control's font is under 16px */
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=tel],
    select,
    textarea {
        font-size: 16px;
        min-height: 40px;
        max-width: 100%;
        box-sizing: border-box;
        width: 100%;
    }

    /* touch targets at the Apple minimum, with room between wrapped buttons */
    input[type=submit],
    input[type=button],
    button {
        min-height: 44px;
        font-size: 16px;
        padding-left: 18px;
        padding-right: 18px;
        margin: 4px 3px;
    }

    /* a wide data grid pans inside itself; without this the grid stretches the whole
       page sideways and the header band no longer reaches the right edge. GridView
       tables carry a rules attribute; layout tables do not and stay untouched. */
    table[rules] {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* the desktop grid right-aligns each label toward its field; stacked at phone
       width that strands the label at the far edge looking attached to the field
       above it. Left-align so label and field read as a pair. */
    .row .text-right {
        text-align: left !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* keep the last button row clear of Safari's collapsing bottom bar */
    body {
        -webkit-text-size-adjust: 100%;
        padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    }

    /* wide data grids pan inside themselves instead of dragging the page sideways */
    .table-responsive,
    div[style*="overflow"] {
        -webkit-overflow-scrolling: touch;
    }
}