/* ==================== */
/* 定数（カスタムプロパティ） */
/* ==================== */
:root {
    /* -------------------- */
    /* 色 */
    /* -------------------- */
    --background-color-loginpage: #0277BD; /* ログインページの背景色（LightBlue.Darken3） */
    --background-color-navgroupheader: #F5F5F5; /* ナビメニューのグループヘッダー（Gray.Lighten4） */
    --background-color-tableheader: #F9FAFB; /* テーブルのヘッダー */
    --background-color-tabbody: #F9FAFB; /* タブのボディー */
    --background-color-tabledisablecell: #F5F5F5; /* テーブルの無効セル */
    --background-color-holiday: #FFBBBB; /* 休日の背景色 */
    --background-color-number-type-business: #4A804C; /* ナンバー区分が営業用の場合の色（緑色） */
    --background-color-labelfield: #F3F7FB; /* ラベルフィールドの背景色 */
    --background-color-emphasis: #F5C81B; /* 強調色（ゴールド） */
    --background-color-required: #D23E57; /* 強調色（ワインレッド） */
    --background-color-table-key: #FFEFCC; /* テーブルキー項目（黄色） */
    --background-color-table-alternating: #FAFAFA; /* テーブル交互色 */
    --background-color-table-hover: #F5F5F5; /* テーブル行ホバー色 */

    --background-color-mobile-background: #F9F9F9; /* モバイルページ用 背景色 */
    --background-color-mobile-lightyellow: #FFFDF4; /* モバイルページ用 明るい黄色 */
    --background-color-mobile-gold: #E5B712; /* モバイルページ用 ゴールド */
    --background-color-mobile-darkgray: #4B4B4B; /* モバイルページ用 ダークグレー */
    --background-color-mobile-gray: #CFCFCF; /* モバイルページ用 グレー */
    --background-color-mobile-lightgray: #F0F0F0; /* モバイルページ用 ライトグレー */
    --background-color-mobile-winered: #D23E57; /* モバイルページ用 ワインレッド */
    --background-color-mobile-disable: #E9E9E9; /* モバイルページ用 無効項目 */
    
    --color-disabled: #00000060; /* 無効色 */

    --border-color-gray: #ddd; /* 灰色罫線 */
    /* タイムライン用（共通） */
    --background-color-timeline-header: var(--background-color-tableheader);
    --color-timeline-item-text: #ffffff;
    --border-color-timeline: var(--border-color-gray);
    /* タイムライン用（配車パターンマスタ） */
    --background-color-timeline-item: #347ABF;
    /* タイムライン用（車両稼働停止ページ） */
    --background-color-timeline-item2: #56B370;
    /*    --background-color-timeline-disabled: #D3D3D3;*/
    --background-color-timeline-disabled: rgb(211, 211, 211, 0.5);
    --border-color-selected-cell: #FF8C00; /* 選択セルの枠線色 */
    --background-color-selected-cell: rgba(255, 140, 0, 0.3); /* 選択セルの背景色（半透明オレンジ） */

    --border-color-mobile-darkgray: #747474; /* モバイルページ用 濃い灰色罫線 */
}

/* ==================== */
/* スタイル設定 */
/* ==================== */
/* -------------------- */
/* 全体 */
/* -------------------- */
html, body {
    height: 100%;
    overflow: hidden;
}

/* ナビメニューのグループヘッダー */
.NavGroupHeader {
    background-color: var(--background-color-navgroupheader) !important;
}

/* テーブルルート */
.mud-table-root {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}
/* テーブルヘッダー */
.TableHeader {
    text-align: center !important;
    font-weight: bold !important;
    background-color: var(--background-color-tableheader) !important;
}

/* 「dense」指定されたセルの右paddingが大きくなってしまうので調整 */
.mud-table-dense .TableHeader,
.mud-table-dense .mud-table-cell{
    padding-right: 16px !important;
    padding-inline-end: 16px !important;
}

/* テーブル選択行 */
.Table-Selected-Row {
    background-color: #FFEFCC !important;
}
/* テーブル選択行（ダーク） */
.Table-Selected-Row-Dark {
    background-color: #CCCCCC !important;
}
/* テキストフィールド */
.MudTextField-Text-Align-Right input {
    text-align: right;
}

/* アイコンボタン（通常ボタンに合わせたサイズ） */
.MudIconButton-ExtraSmall {
    height: 30.75px;
    width: 30.75px;
}
.MudIconButton-ExtraSmall > span > span {
    font-size: 18px;
}
/* チェックボックス */
.custom-readonly-checkbox svg {
    color: var(--mud-palette-primary) !important;
}

/* カラーピッカー */
input[type="color"] {
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
}
input[type="color"]:disabled {
    cursor:default;
}

/* MudField要素の背景色 */
/*.mud-field .mud-input-outlined-border {
    background-color: var(--background-color-labelfield);
}*/
/* -------------------- */
/* ドラッグ＆ドロップエリアのスタイル */
/* -------------------- */
/* ドラッグ＆ドロップエリア（通常） */
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}
/* ドラッグ＆ドロップエリア（ドラッグオーバー時） */
.drop-zone.drag-over {
    border-color: var(--mud-palette-primary);
    background-color: #f0f7ff;
}
/* ドラッグ＆ドロップエリア（アイコン） */
.drop-zone .mud-icon {
    font-size: 48px;
    color: var(--mud-palette-primary);
}

.drop-zone:hover {
    border-color: var(--mud-palette-primary-lighten);
}

/* -------------------- */
/* googleアイコンのスタイル */
/* -------------------- */
/*太さ（範囲：100～700）*/
.material-symbols-outlined.wt-100 {
    font-variation-settings: 'wght' 100;
}
.material-symbols-outlined.wt-200 {
    font-variation-settings: 'wght' 200;
}
.material-symbols-outlined.wt-300 {
    font-variation-settings: 'wght' 300;
}
.material-symbols-outlined.wt-400 {
    font-variation-settings: 'wght' 400;
}
.material-symbols-outlined.wt-500 {
    font-variation-settings: 'wght' 500;
}
.material-symbols-outlined.wt-600 {
    font-variation-settings: 'wght' 600;
}
.material-symbols-outlined.wt-700 {
    font-variation-settings: 'wght' 700;
}
/*塗りつぶし（0=アウトライン, 1=塗りつぶし）*/
.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
}

/* ==================== */
/* スタイル設定（モバイルページ用） */
/* ==================== */
/* -------------------- */
/* MobileLayoutのMudMainContentの高さ */
/* -------------------- */
/* 通常 */
#mobile-layout-maincontent {
    /*    height: calc(100vh - 48px); ※←スマートフォンのナビゲーションバーを含んだ高さのため「dvh」に変更 */
    height: calc(100dvh - 48px);
    min-height: calc(100dvh - 48px); /* ※←コンテンツ最下部のpaddingを表示させるために必要 */
    margin-top: 48px;
}
/* 幅600px以上 */
@media (min-width: 600px) {
    #mobile-layout-maincontent {
        /*        height: calc(100vh - 64px); ※←スマートフォンのナビゲーションバーを含んだ高さのため「dvh」に変更 */
        height: calc(100dvh - 64px);
        min-height: calc(100dvh - 64px); /* ※←コンテンツ最下部のpaddingを表示させるために必要 */
        margin-top: 64px;
    }
}

/* -------------------- */
/* MudTimePicker */
/* -------------------- */
.mobile-timepicker .mud-input-outlined {
    height: 50px;
    font-size: 26px;
/*    width: 140px;*/
    width: 100%;
    padding-left: 7px !important;
    background-color: white;
}

    .mobile-timepicker .mud-input-outlined .mud-input-root {
        margin-left: -13px;
    }

/* -------------------- */
/* MudDialog */
/* -------------------- */
@media (max-width: 600px) {
    .mobile-dialog {
        margin: 0 !important;
        max-width: calc(100% - 32px) !important; /* 左右の余白の量を標準（calc(100% - 64px)）の半分に変更 */
        width: calc(100% - 32px) !important; /* 左右の余白の量を標準（calc(100% - 64px)）の半分に変更 */
    }
}

/* -------------------- */
/* MudFileUpload */
/* -------------------- */
/* 中の要素の「height:100%」を有効にするための設定 */
.mudfileupload-innerelement-height100 .mud-input-control-input-container,
.mudfileupload-innerelement-height100 .mud-input-control-input-container div {
    height: 100%;
}

/* ==================== */
/* スタイル設定（モバイルページ用） */
/* ==================== */

/* -------------------- */
/* モバイルメッセージ通知 */
/* -------------------- */

/* アニメーション */
@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.mobile-message-notification {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 1000;
    transform: translateY(100%); /* 初期状態は非表示（下に押し出された状態） */
    opacity: 0;
}

    .mobile-message-notification.show {
        animation: slide-up 1s forwards ease-out;
    }

    .mobile-message-notification.hide {
        animation: slide-down 1s forwards ease-in;
    }

/* バッジの位置調整 */
    .mobile-message-notification .mud-badge-wrapper {
        margin-top: -5px;
    }