/* /Views/Shared/_Layout.cshtml.rz.scp.css */
/* レイアウトのスコープ付きCSS。~/MakeSence.styles.css として自動バンドルされる。 */

/* 高さは site.css の .page-header { top: 3em } と対応している。
   変えるときは site.css の top も合わせること。 */
.site-navbar[b-fodtp5ddw5] {
    height: 3em;
}

.navbar-brand[b-fodtp5ddw5] {
    font-size: 1.5rem;
    padding-top: 0;
}

a[b-fodtp5ddw5] {
    color: #0077cc;
}

.box-shadow[b-fodtp5ddw5] {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

main[b-fodtp5ddw5] {
    margin-top: 3em;
}

/* lg 以上: サイドバーを navbar の下に固定表示し、本文をその分ずらす */
@media (min-width: 992px) {
    .app-sidebar[b-fodtp5ddw5] {
        position: fixed;
        top: 3em;
        bottom: 0;
        left: 0;
        width: 16rem;
        padding: 1rem;
        overflow-y: auto;
        /* Bootstrap が lg 以上で .offcanvas-lg に background-color: transparent !important を
           当てるので、!important でないと勝てない。透過するとサイドバーが背景と同化する。 */
        background: #ffffff !important;
        border-right: 1px solid #e5e5e5;
        z-index: 1035; /* .page-header(1030) より前に出す */
    }

    /* Bootstrap が lg 以上で .offcanvas-lg .offcanvas-body に display: flex を当てる。
       既定の flex-direction: row のままだとメニューの各ブロックが横並びになるので縦に戻す。 */
    .app-sidebar .offcanvas-body[b-fodtp5ddw5] {
        flex-direction: column;
    }

    main.with-sidebar[b-fodtp5ddw5] {
        margin-left: 16rem;
    }
}

/* lg 未満: サイドバーは offcanvas として引き出すので、本文は全幅 */
@media (max-width: 991.98px) {
    main.with-sidebar[b-fodtp5ddw5] {
        margin-left: 0;
    }

    /* Bootstrap の既定は 400px 固定。350px の端末だと画面を覆い切ってしまい、
       「引き出しが開いた」ことも背後のページも見えない。背景を少し残す。 */
    .app-sidebar.offcanvas-lg[b-fodtp5ddw5] {
        width: min(80vw, 18rem);
    }
}

/* navbar は .site-navbar で高さを 3em に固定している。中身が折り返すと
   2段目が高さからはみ出して切れるので、狭い画面でも1段に収める。
   なお _LoginPartial 側の要素（ユーザー名・ログアウト）はこのスコープ付きCSSの
   対象外（b-* 属性が付かない）なので、そちらの指定は site.css にある。 */
.site-navbar .container-fluid[b-fodtp5ddw5] {
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.site-navbar .navbar-toggler[b-fodtp5ddw5] {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .navbar-brand[b-fodtp5ddw5] {
        font-size: 1.15rem;
        margin-right: 0;
    }

    .site-navbar .navbar-toggler[b-fodtp5ddw5] {
        padding: 0.15rem 0.4rem;
        font-size: 1rem;
    }
}