/* ==========================================================================
 * 共通画面（shared/core/templates/core/*.html）の土台
 *
 * 共通テンプレートが必要とする「枠・貼り付き・重なり順」をここにまとめる。
 * 以前はテンプレートのインライン <style> と、各アプリの CSS のコピーに散らばっていて、
 * アプリによって前提が違うために画面が崩れていた（2026-09-21 の配置Proで3件）。
 *
 * ★**アプリがやること**: base.html でこのファイルを読み込み、
 *   自分のヘッダーの高さに合わせて下の変数を :root で上書きする。
 *   既定値は警備Pro（ヘッダーが場所を取る・段は 60px で貼り付く）に合わせてある。
 *
 *     :root {
 *         --screen-content-top: 80px;   ← ヘッダーが position: fixed のアプリはその高さ
 *         --screen-titlebar-pos: sticky; ← 貼り付けないなら static
 *         --screen-titlebar-top: 65px;  ← 画面名とボタンの段が貼り付く位置
 *         --screen-titlebar-h: 126px;   ← その段の高さ（実測）
 *         --screen-titlebar-z: 1;       ← 段の重なり
 *         --screen-selector-z: 2;       ← 選択欄の重なり（段より上、ヘッダーより下）
 *     }
 *
 * ★**重なり順の決め方**: 選択欄 > 画面名の段。かつ**両方ともアプリのヘッダーより下**。
 *   ヘッダーが z-index を持つアプリ（配置Proの .navbar は 101）で既定の 1000 のままだと、
 *   ハンバーガーのメニューの上に白い箱として被る。
 *
 * ★**位置の決め方**: 選択欄は「段の下端」に貼り付ける（top = 段の位置 + 段の高さ）。
 *   sticky は本来の位置が top より上にあると**下へ押し出す**ので、大きすぎる値を入れると
 *   スクロールしていなくても下の内容を覆う。段の高さはブラウザで実測すること。
 * ========================================================================== */
:root {
    --screen-content-top: 0px;
    /* 段を上に貼り付けない（アプリのヘッダー自体がスクロールで流れる等）場合は static にする */
    --screen-titlebar-pos: sticky;
    --screen-titlebar-top: 60px;
    --screen-titlebar-h: 119px;
    --screen-titlebar-z: 10;
    --screen-selector-z: 1000;
}

/* ===== 本文の枠 ===== */
#page-content-wrapper {
    min-width: 0;
    padding-top: var(--screen-content-top);
    transition: margin-left 0.35s ease;
}

/* 画面名の段は Bootstrap の .container に入っている。中央寄せ（max-width と auto マージン）を
   打ち消さないと、段だけ中央に寄って本文と左端がずれる。 */
#page-content-wrapper > .container,
#page-content-wrapper > .container-fluid {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 980px) {
    #page-content-wrapper > .container,
    #page-content-wrapper > .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===== 上に貼り付く段 ===== */
.container.toptitle-fix {
    position: var(--screen-titlebar-pos);
    top: var(--screen-titlebar-top);
    z-index: var(--screen-titlebar-z);
    background: white;
}

/* 担当者などの選択欄。段の下端に貼り付ける */
.fix-tanto {
    position: sticky;
    top: calc(var(--screen-titlebar-top) + var(--screen-titlebar-h));
    z-index: var(--screen-selector-z);
    background-color: white;
    box-shadow: none;
}

@media (max-width: 768px) {
    .fix-tanto {
        /* 段が2行に折り返すぶん下げる */
        top: calc(var(--screen-titlebar-top) + var(--screen-titlebar-h) + 45px);
    }
}

/* ===== 表と入力の細かいところ（共通テンプレートが使う） ===== */
.table-container,
.custom-scroll-container {
    width: 100%;
    overflow-x: auto;
}

.custom-table {
    width: 100% !important;
    min-width: 300px;
    table-layout: auto;
}

option,
select.select_list {
    background: #ffffff;
    color: black;
}

/* ==========================================================================
 * 会社選択画面（core/templates/core/select_tenant_base.html）
 *
 * 2026-09-22 に各アプリの CSS から集約（警備・教育・sign・備品・工事で同内容。
 * 配置Proだけ指定が無く素のまま出ていた）。色や文字サイズを変えたいアプリは
 * このあとに読み込む自分の CSS で上書きする。
 * ========================================================================== */
.col-12.sel-tenant {
    /* ヘッダーが position: fixed のアプリ（配置Pro）はその分下げる */
    padding-top: var(--screen-content-top);
}

.company-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    background-color: #f9f9f9;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.info-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.list-group-wrapper {
    flex: 1 1 300px;
}

.character-img {
    max-width: 150px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .company-container {
        flex-direction: column;
        gap: 20px;
    }

    .info-text h2 {
        font-size: 24px;
    }
}