body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f7f6;
}

.container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.input-section, .timetable-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

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

input, textarea, button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

textarea {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
}

button {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: none;
}

/* タイムテーブルのグリッド */
.timetable-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6列(月〜土) */
    gap: 5px;
    background-color: #eee;
    padding: 5px;
}

.day-header {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

.day-slot {
    background: white;
    min-height: 120px;
    padding: 5px;
    border: 1px solid #ddd;
}

/* 祝日のグレーアウト */
.day-slot.holiday {
    background-color: #f0f0f0;
}
.day-slot.holiday .date-label {
    color: #d9534f; /* 祝日は日付を赤く */
}

.date-label {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* 予約アイテム全体のデザイン */
.appointment-item {
    background-color: #e3f2fd; /* 薄い青 */
    border-left: 4px solid #2196f3;
    margin-bottom: 4px;
    padding: 4px;
    font-size: 0.85em;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1.2;
}

.location {
    color: #666;
    display: inline-block;
    margin-top: 3px;
}

/* 完了済みのスタイル */
.appointment-item.status-completed {
    background: #d1d1d1;
    border-left: 4px solid #666;
    text-decoration: line-through;
    opacity: 0.7;
}

/* 時間表示 */
.app-time {
    font-weight: bold;
    color: #1976d2;
    font-size: 0.8em;
}

/* 現場名（location） */
.app-location {
    color: #666;
    white-space: nowrap;      /* 長い場合は一行で */
    overflow: hidden;         /* はみ出しを隠す */
    text-overflow: ellipsis; /* 「...」で省略 */
}

/* 完了済みのスタイル */
.status-completed {
    background-color: #e8f5e9 !important; /* 薄い緑 */
    border-left-color: #4caf50 !important;
    color: #888;
}

/* 今日を強調するハイライト */
.day-slot.today {
    background-color: #fff0f0; /* 薄い赤 */
    border: 2px solid #ffcccc; /* 枠線も少し赤く */
}

.day-slot.today .date-label {
    background-color: #ff5252; /* 日付ラベルを強調 */
    color: white;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 5px;
}

/* 顧客名のプレースホルダーを薄い赤に */
#customer_name::placeholder {
    color: #ffcccc; /* 薄い赤（ピンク系） */
    opacity: 1;     /* ブラウザによる透明度の補正 */
}

/* 型式のプレースホルダーを薄い赤に */
#machine_model::placeholder {
    color: #ffcccc;
    opacity: 1;
}

/* 入力中の文字まで赤くなると見にくいので、
   フォーカスした時（入力中）は通常のプレースホルダー色にする設定 */
#customer_name:focus::placeholder,
#machine_model:focus::placeholder {
    color: #ccc;
}

/* 必須項目の背景をほんのり赤くする場合（お好みで） */
#customer_name, #machine_model {
    border-left: 5px solid #ff5252; /* 左側に赤い縦線を入れる */
    background-color: #fffafa;      /* ごく薄い赤色の背景 */
}

/* 必須項目のプレースホルダーを薄い赤に */
#customer_name::placeholder,
#machine_model::placeholder,
#appointment_date {
    color: #ffcccc; /* 薄い赤 */
    opacity: 1;
}

/* 日付入力欄（datetime-local）の文字色も、未入力時は薄い赤にする設定 */
#appointment_date:invalid {
    color: #ffcccc;
}

/* 入力中や値が入っている時は、見やすいように黒（通常色）に戻す */
#customer_name:focus::placeholder,
#machine_model:focus::placeholder,
#appointment_date:focus,
#appointment_date:valid {
    color: #333;
}

/* 必須項目の左側に赤い線を引いて、さらに目立たせる（おすすめ） */
#customer_name, 
#machine_model, 
#appointment_date {
    border-left: 5px solid #ff5252;
    background-color: #fffafa;
}