/*
==================================================
AUFU OS / AI Lab 共通ヘッダー
==================================================
このファイルで、AI Lab内の管理画面の
横幅・余白・見出しサイズを統一します。
*/


/* -----------------------------------------------
   共通の画面外枠
----------------------------------------------- */

html,
body {
    margin: 0;
}

body {
    padding: 0 !important;
}


/*
AI Lab・FAQ管理・AI Test・質問履歴
*/
body > main.page,
body > main.container {
    width: min(
        1440px,
        calc(100% - 40px)
    ) !important;

    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 0 !important;
}


/*
FAQ新規・編集ページ
*/
body .admin-layout > main.main-content.form-page {
    width: min(
        1440px,
        calc(100% - 40px)
    ) !important;

    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 0 !important;
}


/* -----------------------------------------------
   通常ページの共通ヘッダー
----------------------------------------------- */

body > main.page > .page-header,
body > main.container > .page-header,
body .main-content.form-page > .page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;

    margin:
        0 -12px 24px
        !important;

    padding:
        20px 12px 16px
        !important;

    border-bottom:
        1px solid #c7ccd3
        !important;

    background:
        rgba(220, 224, 229, 0.97)
        !important;

    box-shadow:
        0 5px 18px
        rgba(24, 31, 40, 0.07)
        !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* -----------------------------------------------
   施設情報ページ
   body直下にheaderがあるため個別に構造を合わせる
----------------------------------------------- */

body > header.page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;

    width: min(
        1440px,
        calc(100% - 40px)
    ) !important;

    max-width: 1440px !important;

    margin:
        0 auto 24px
        !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}


body > header.page-header > .header-inner {
    width: auto !important;
    max-width: none !important;

    margin:
        0 -12px
        !important;

    padding:
        20px 12px 16px
        !important;

    border-bottom:
        1px solid #c7ccd3
        !important;

    background:
        rgba(220, 224, 229, 0.97)
        !important;

    box-shadow:
        0 5px 18px
        rgba(24, 31, 40, 0.07)
        !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/*
施設情報の本文上部にあった30pxの余白を除去
*/
body > main.page {
    padding-top: 0 !important;
}


/* -----------------------------------------------
   左上の見出し
----------------------------------------------- */

.page-header .eyebrow {
    margin:
        0 0 8px
        !important;

    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    color: #69717c;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.09em !important;
}


.page-header .header-brand {
    flex: 0 0 auto;
}


.page-header .header-summary {
    color: #7a828c;

    font-weight: 650;
    letter-spacing: 0.01em;
}


/*
各ページのページ名を同じサイズに統一
*/
.page-header .page-title,
.page-header .form-page-title {
    margin: 0 !important;

    color: #16191d !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}


/*
説明文は1段目へ移しているため非表示
*/
.page-header .page-description,
.page-header .version-label {
    display: none !important;
}


/* -----------------------------------------------
   右上メニュー
----------------------------------------------- */

.page-header .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}


/* -----------------------------------------------
   タブレット・スマートフォン
----------------------------------------------- */

@media (max-width: 900px) {

    body > main.page > .page-header,
    body > main.container > .page-header,
    body .main-content.form-page > .page-header,
    body > header.page-header {
        position: static !important;
    }


    .page-header .header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


@media (max-width: 760px) {

    body > main.page,
    body > main.container,
    body .admin-layout > main.main-content.form-page,
    body > header.page-header {
        width:
            calc(100% - 24px)
            !important;
    }


    .page-header .eyebrow {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;

        font-size: 11px !important;
    }


    .page-header .page-title,
    .page-header .form-page-title {
        font-size: 25px !important;
    }
}