/*
 * 横長表のスクロール領域 (specification 37).
 *
 * Loaded on every screen, on both surfaces, so a wide table behaves the same
 * way wherever it is rendered rather than each screen inventing its own
 * overflow rule.
 *
 * Only plugin classes are styled. Nothing here reaches a theme element, so a
 * page that merely hosts the dashboard is unaffected.
 */

/*
 * The wrapper a wide table sits in.
 *
 * `min-width: 0` is the part that actually matters and the part that is easy to
 * miss. A scroll container placed inside a flex or grid item inherits that
 * item's `min-width: auto`, which resolves to its *content's* min-content size
 * — so the item grows to the width of the table, the scroll container is sized
 * to its parent, `scrollWidth === clientWidth`, and there is nothing to scroll.
 * The overflow escapes upwards and the page scrolls instead, which is exactly
 * the reported symptom (37.2).
 */
.c2sr-scroll {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    /* Momentum scrolling on iOS, and a swipe that stops at the table's edge
       rather than dragging the page behind it. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/*
 * A wide table keeps its columns legible rather than being squeezed into the
 * viewport. Narrowing 9 booths or 11 contract columns onto a phone would make
 * every cell unreadable and every tap target too small; scrolling the table is
 * the arrangement specification 37.4 asks for.
 */
.c2sr-scroll > .widefat {
    min-width: max-content;
}

/*
 * Any ancestor between a scroll container and the page has to be allowed to
 * shrink too. These are the plugin's own layout containers; the theme's are
 * never touched.
 */
.c2sr-dashboard .wrap,
.c2sr-dashboard .wrap > *,
.c2sr-grids,
.c2sr-grids > * {
    min-width: 0;
}

/* ------------------------------------------- 折りたたみ（specification 51.12） */

/*
 * 補助の表を閉じておく箱。分析画面の `.c2sr-analytics .c2sr-collapse` と同じ
 * 見た目だが、あちらは分析画面でしか読み込まれない stylesheet に入っている。
 * 生徒マスタでも使うので、表と同じ場所——どの画面でも読み込まれる側——に置く。
 */
.c2sr-collapse {
    margin: 12px 0 20px;
    padding: 8px 12px;
    border: 1px solid #d6dbe1;
    border-radius: 4px;
    background: #fff;
}

.c2sr-collapse > summary {
    min-height: 36px;
    line-height: 36px;
    cursor: pointer;
    font-weight: 600;
}

/*
 * 補完の確認。押した結果が一覧の上に積み上がるので、区切りを1本引いて
 * 「ここから下は名簿」と分かるようにする。
 */
.c2sr-enrichment {
    margin: 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #d6dbe1;
}

/*
 * 反映のチェックボックスは指で押す。行の高さに合わせるのではなく、的のほうを
 * 44px 側へ寄せる——iPhone 縦で1行ずつ選ぶ操作になるためである。
 */
.c2sr-enrichment input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 8px 4px;
}