/*ルート変数の設定*/
:root {
    --cell-left-width: 90px; /* セルの幅 */
    --cell-right-width: 20px; /* セルの幅 */
    --cell-height: 30px; /* セルの高さ */
    --cell-yearmonth-font-size: 14px; /* セルのフォントサイズ */
    --cell-font-size: 8px; /* セルのフォントサイズ */
    --mark-line-height: 2px; /* 線の高さ */
    --mark-height: 20px; /* マークの高さ */
    --mark-width: 20px; /* マークの幅 */
    --mark-font-size: 5px; /* マークのフォントサイズ */
    --time: 1s; /* アニメーション時間 */
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    position: relative;
}

.calendar {
    padding: 20px;
    width: 100%;
    overflow-x: auto; /* 横スクロールを有効化 */
}

.header {
    position: fixed;
    top: 15px;
    right: 15px;
	left: 0;
    padding: 5px 10px;
    display: flex;
	flex-direction: column;
    align-items: flex-end;
    z-index: 1000;
}

.settei-link {
    font-size: 16px;
    color: #867d7d;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.settei-link:hover {
    color: #373333;
    text-decoration: underline;
}

.main {
    width: 100%;
    margin-top: 60px;
}

.header-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

select {
    width: 150px;
    padding: 5px;
    margin: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

button {
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
}

/*カレンダーのスタイル*/

/* グリッドコンテナ */
.grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
}

/* ローディングインジケーターのスタイル */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8); /* 半透明背景 */
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; /* 初期状態で非表示 */
    pointer-events: none; /* ユーザー操作を無効化 */
}

/* カレンダーを表示するスペース */
.calender-space{
    display: flex;
    width: 100%;
    position: relative; /* 親要素にrelativeを設定 */
    overflow-x: auto; /* 横スクロールを有効化 */
}

/* フッターを表示するスペース */
.fotter-space{
    display: flex;
    width: 100%;
    padding: 1px;
    align-items: center;
    justify-content: center;
	background-color: #f0f0f0;
    position: relative; /* 親要素にrelativeを設定 */
}

/* ズームボタンのスタイル */
.zoom-button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ズームボタンにフォーカスされた時のスタイル */
.zoom-button:hover {
    background-color: #e0e0e0;
}

/* 今日ボタン（文字のみ）のスタイル */
.today-button {
    position: absolute;
    left: 20px; /* 左端からの距離 */
    top: 50%; /* 縦中央 */
    transform: translateY(-50%); /* 縦方向の中央揃え */
    background: none;
    border: none;
    color: red;
    font-size: 12px;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

/* 今日ボタン（文字のみ）にフォーカスされた時のスタイル */
.today-button:hover {
    text-decoration: underline; /* ホバー時に下線 */
}

/*固定カラム(左側)とスクロールカラム(右側)のスタイル*/
.sticky-column , .scroll-column{
    display : flex;
    gap : 0;
    margin : 0;
    flex-direction: column;
}

.sticky-column {
    position : sticky;
    left: 0;
    z-index: 2;
}

/*スクロールカラム(右側)の中の行のスタイル*/
.table-row {
    display: flex;
    width: 100%;
    gap: 0; /* セル間の隙間を0に設定 */
    margin: 0; /* マージンをリセット */
}

/*各セルの総合スタイル*/
.header-cell, .day-cell , .project-cell, .empty-cell{
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
    display: flex;
    align-items: center; /* 縦位置を中央揃え */
    justify-content: center; /* 横位置を中央揃え */
    height: var(--cell-height); /* セルの固定高さ */
    transition: height var(--time) ease; /* スムーズなアニメーション */
}

/*スクロールカラム(右側)の日付セルのスタイル(月を表示する)*/
.month-visible-cell {
    font-size : 6px;
}

/*スクロールカラム(右側)の日付セルのスタイル(月を表示しない)*/
.month-hidden-cell {
    color: transparent;
    font-size : 6px;
}

/*スクロールカラム(右側)セルの総合スタイル*/
.day-cell, .empty-cell {
    flex: 1;
    min-width: var(--cell-right-width);
    width: var(--cell-right-width);
    transition: min-width var(--time) ease , width var(--time) ease; /* スムーズなアニメーション */
}

/*固定カラム(左側)のヘッダーセルのスタイル*/
.header-cell {
    position: sticky;
    left: 0;
    background-color: #f0f0f0;
    z-index: 5;
}

/*固定カラム(左側)の年月セルのスタイル*/
.year-month-cell {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column;
    align-items: flex-end; /* 縦方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    min-width: var(--cell-left-width); /* 必要に応じて最小幅を調整 */
    font-size: var(--cell-yearmonth-font-size); /* フォントサイズを設定 */
    transition: min-width var(--time) ease , font-size var(--time) ease; /* スムーズなアニメーション */
}

/*固定カラム(左側)のプロジェクトセルのスタイル*/
.project-cell {
    position: sticky;
    left: 0;
    background-color: #e0f7fa;
	font-size: var(--cell-font-size); /* フォントサイズを設定 */
    min-width: var(--cell-left-width); /* プロジェクト名セルの幅 */
    display: flex; /* フレックスコンテナとして扱う */
    flex-direction: column; /* 縦に配置 */
    align-items: flex-start; /* 左揃え */
    z-index: 1;
    transition: min-width var(--time) ease , font-size var(--time) ease; /* スムーズなアニメーション */
}

/*固定カラム(左側)のプロジェクトセルの色SPANのスタイル*/
.colored-span {
    display: block; /* インラインブロック */
    width: 10%; /* 1/10の幅 */
    height: 100%; /* 高さを100%に設定 */
    background-color: inherit; /* 親の背景色を引き継ぐ */
    position: absolute; /* 絶対位置 */
    left: 0; /* 左端に配置 */
    top: 0; /* 上端に配置 */
}

/*スクロールカラム(右側)の日付セルのスタイル*/
.day-cell {
    font-size: var(--cell-font-size); /* フォントサイズを設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: font-size var(--time) ease; /* スムーズなアニメーション */
}

/*スクロールカラム(右側)の日付セルのスタイル(当日のセル)*/
.today{
    background-color: red !important;
}

/*スクロールカラム(右側)の予定セルのスタイル*/
.empty-cell {
    background-color: #fff;
    position : relative;
}

/*スクロールカラム(右側)の実線のスタイル*/
.mark-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%; /* セルの中央に配置 */
    height: var(--mark-line-height); /* 実線の太さ */
    background: rgb(63, 61, 61); /* 実線の色 */
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    display: none; /* 初期状態では非表示 */
    transition: height var(--time) ease; /* スムーズなアニメーション */
}

/*スクロールカラム(右側)の初日の実線のスタイル*/
.first-cell .mark-line {
    width: 50%; /* セルの中央に表示 */
    left: 50%; /* 中央に位置 */
}

/*スクロールカラム(右側)の予定初日の実線のスタイル*/
.firststart-cell .mark-line {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
}

/*スクロールカラム(右側)の予定最終日の実線のスタイル*/
.end-cell .mark-line {
    right: 50%;
    width: 50%;  /* セルの右半分を指定 */
}

/*スクロールカラム(右側)の日曜日のセルのスタイル*/
.sunday {
	background: rgb(161, 156, 156);
}

/*施工班を描画するスタイル*/
.sekou {
    border-radius: 50%; /* 丸くする */
    position: absolute; /* 必要に応じて絶対位置に */
    left: 50%; /* セルの中央に配置 */
    top: 4%; /* セル内の縦方向位置 */
    transform: translateX(-50%); /* 水平方向に中央揃え */
    display: flex; /* フレックスボックスで中央揃え */
    align-items: center; /* 縦方向に中央揃え */
    justify-content: center; /* 横方向に中央揃え */
    color: #000000; /* テキストの色を設定 */
    font-size: var(--mark-font-size); /* フォントサイズを設定 */
    white-space: nowrap; /* 改行しない */
    transition: font-size var(--time) ease; /* スムーズなアニメーション */
}

/*住所を描画するスタイル*/
.address {
    position: absolute; /* 必要に応じて絶対位置に */
    left: 50%; /* セルの中央に配置 */
    bottom: 4%; /* セル内の下方向位置 */
    transform: translateX(-50%); /* 水平方向に中央揃え */
    display: flex; /* フレックスボックスで中央揃え */
    align-items: center; /* 縦方向に中央揃え */
    justify-content: center; /* 横方向に中央揃え */
    color: #000000; /* テキストの色を設定 */
    font-size: var(--mark-font-size); /* フォントサイズを設定 */
    white-space: nowrap; /* 改行しない */
    transition: font-size var(--time) ease; /* スムーズなアニメーション */
}

/*マークを描画するスタイル*/
.mark {
    background-color: var(--mark-color, #ff0000); /* マークの色 (デフォルトは赤) */
    width: var(--mark-width); /* 幅 */
    height: var(--mark-height); /* 高さ */
    border-radius: 50%; /* 丸くする */
    position: absolute; /* 必要に応じて絶対位置に */
    left: 50%; /* セルの中央に配置 (水平方向) */
    top: 50%; /* セルの中央に配置 (垂直方向) */
    transform: translate(-50%, -50%); /* 完全に中央揃え */
    display: flex; /* フレックスボックスで中央揃え */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    color: #fff; /* テキストの色 */
    font-size: 6px; /* フォントサイズ */
    transition: width var(--time) ease, height var(--time) ease; /* スムーズなアニメーション */
}
/*カレンダーのスタイル終わり*/

.day {
    border: 1px solid #ddd;
    padding: 5px;
    min-width: 40px;
    text-align: center;
    font-size: 8px;
    box-sizing: border-box;
}

.day-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weekend {
    background-color: #dddddd;
}

.logout-link,
.user-link {
    font-size: 12px;
    color: #867d7d;
    text-decoration: none;
    margin-left: 10px;
}

.logout-link:hover,
.user-link:hover {
    color: #373333;
    text-decoration: underline;
}

.add-btn {
	position: fixed;
    top: 15px;
    left: 15px;
    font-size: 30px;
    color: #181a18;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 9999;
    text-decoration: none;
}

#projectModal {
    width: 80%;  /* 画面幅の80% */
    max-width: 600px;  /* 最大幅600px */
    margin: auto;  /* 中央に配置 */
}

/*@media (max-width: 768px) {
    .grid {
        gap: 5px;
        width: 100%;
    }

    .day {
        min-width: 40px;
        font-size: 12px;
    }

	.header {
		justify-content: space-between;
		transform: translateX(200px);
	}
    .header-controls {
        flex-direction: column;
        align-items: center;
    }

	.settei-link {
		font-size: 8px;
		color: #867d7d;
		text-decoration: none;
		position: fixed;
		bottom: 20px;
		right: 20px;
	}

    select, button {
        width: 100%;
        margin: 5px 0;
    }

    .date-grid .day {
        font-size: 16px;
        padding: 5px;
    }
}*/

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    border-radius: 5px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

textarea, input[type="text"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.date-grid {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.date-grid .day {
    display: flex;
    width: auto;
    font-size: 10px;
    text-align: center;
    padding: 10px;
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group select {
    width: 100%;
}

.day div {
    margin-top: 5px;
    font-size: 10px;
    color: #333;
}

.calendar-grid {
    display: flex;
    overflow-x: auto;
    /*gap: 3px;*/
}

.project-row {
    display: flex;
    overflow-x: auto;
    /*gap: 3px;*/
    margin-top: 10px;
}

.project-row div {
    font-size: 12px;
    color: #333;
    margin: 2px 0;
}

.header-link-disabled {
    pointer-events: none; /* クリックイベントを無効にする */
    color: gray; /* リンクの色を変える */
}

.centered-color {
    position: absolute;
    left: 50%;
    z-index: 999;
}