/* 画面幅が狭いとき（スマートフォン・タブレット）の表示。
   共通のレイアウトだけをここで面倒みる。各画面固有の調整はその画面側に置く。

   考え方
   ・左カラムは畳んで、開閉ボタンで出す。項目が8つ以上あるので、
     常に縦に並べると本文が画面の下へ追い出される。
   ・横に広い表は枠の中で横スクロールさせる。ページ全体が横に伸びると
     どの画面も読みにくくなる。
   ・入力欄は幅いっぱい。固定幅のままだと画面からはみ出す。 */

/* 表の横スクロール枠。js/responsiveNav.js が枠の無い表を包む */
.table-scroll,
.table-responsive,
.js-table-scroll,
.cart-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

/* 左カラムの入れ子（レイアウト側とパーツ側の両方に .sidebar がある）。
   内側にも余白と背景が付いて二重になるので、内側は素にする。 */
.sidebar .sidebar {
    flex: initial;
    width: auto;
    padding: 0;
    background-color: transparent;
}

/* 開閉ボタンは狭い画面だけ */
.menu-toggle {
    display: none;
}

@media (max-width: 900px) {
    .container {
        flex-direction: column;
        margin-top: 56px;
    }

    .sidebar {
        flex: 0 0 auto;
        width: auto;
        padding: 12px;
    }

    /* 畳んだ状態。ようこその行は残し、項目とログアウトだけ隠す */
    .sidebar.collapsed ul,
    .sidebar.collapsed .logout-section {
        display: none;
    }

    .menu-toggle {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        padding: 10px 12px;
        border: none;
        background-color: var(--n2d-red, #a32923);
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.1em;
        text-align: center;
        cursor: pointer;
    }

    .content {
        padding: 12px;
        padding-bottom: 70px;
    }

    .navbar {
        height: auto;
        min-height: 56px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .navbar a {
        display: inline-block;
        margin: 4px 8px;
    }

    /* 固定幅の入力欄・枠が画面からはみ出さないようにする */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    .login-box,
    .register-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 横並びの操作列は折り返す */
    .form-row,
    .range-inputs,
    .cart-picker,
    .bulk-actions,
    .form-buttons,
    .auth-links,
    .statement-buttons,
    .role-checks,
    .button-group {
        flex-wrap: wrap;
    }

    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 17px; }
    p  { font-size: 15px; }
}

@media (max-width: 480px) {
    .content {
        padding: 10px;
    }

    /* 送信ボタンは押しやすいよう幅いっぱいに。表の中の小さな操作は対象外 */
    .form-buttons .button,
    .form-buttons button,
    .login-button,
    .register-button {
        width: 100%;
        box-sizing: border-box;
    }

    .card {
        padding: 10px;
    }
}