/* ==========================================
   既存のスタイル
   ========================================== */
/* ここに既存のstyle.cssの内容があれば、そのまま残してください */


/* ==========================================
   勤怠入力画面 スタイルシート
   ========================================== */

/* ==========================================
   リセットスタイル
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   body: ページ全体のスタイル
   ========================================== */
body {
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', sans-serif;
    padding: 10px;
    background-color: #f5f5f5;
    font-size: 13px;
}

/* ==========================================
   コンテナ：全体を囲む白い箱
   ========================================== */
.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    padding: 15px;
    border: 2px solid #333;
}

/* ==========================================
   ヘッダー部：年月・氏名・検索ボタン
   ========================================== */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px 15px;
    background-color: #87CEEB;
    border: 1px solid #333;
}

/* ヘッダー左側：年月・氏名 */
.header-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 15px;
}

/* ラベル */
.header-item label {
    font-weight: bold;
    font-size: 16px;
    color: #000;
    margin: 0;
}

/* 年の入力欄 */
.input-year {
    width: 60px;
    padding: 2px 5px;
    border: 1px solid #333;
    font-size: 16px;
    text-align: center;
    background-color: white;
}

/* 月の入力欄 */
.input-month {
    width: 40px;
    padding: 2px 5px;
    border: 1px solid #333;
    font-size: 16px;
    text-align: center;
    background-color: white;
}

/* 「年」ラベル */
.year-label {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

/* 「月」ラベル */
.month-label {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

/* 氏名の選択欄（ドロップダウン） */
.input-employee {
    width: 150px;
    padding: 2px 8px;
    border: 1px solid #333;
    font-size: 14px;
    text-align: left;
    background-color: white;
}

/* 氏名ラベル */
.employee-label {
    margin-right: 5px;
}

/* ==========================================
   休暇・欠勤のハイライト表示
   ========================================== */
/* 休暇の行（年休、体調不良など） */
tr.absence {
    background-color: #FFB6C1 !important; /* 薄いピンク */
}

/* 休暇の行（より濃いバージョン） */
tr.sick-leave {
    background-color: #FFA07A !important; /* サーモンピンク */
}

/* 休暇の行（年休） */
tr.annual-leave {
    background-color: #FFE4E1 !important; /* ミスティローズ */
}

/* 備考欄の強調表示 */
.remarks-highlight {
    background-color: #FF6B6B !important;
    color: white !important;
    font-weight: bold;
    padding: 3px 5px !important;
    border-radius: 3px;
}

/* ==========================================
   検索ボタン
   ========================================== */
.search-btn {
    padding: 8px 25px;
    background-color: #4169E1;
    color: white;
    border: 2px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.search-btn:hover {
    background-color: #3158D0;
}

/* ==========================================
   テーブルコンテナ
   ========================================== */
.table-container {
    overflow-x: auto;
    margin-bottom: 15px;
    border: 2px solid #000;
}

/* ==========================================
   テーブル
   ========================================== */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

/* テーブルヘッダー */
th {
    background-color: #4169E1;
    color: white;
    padding: 8px 4px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #000;
    font-size: 13px;
    white-space: nowrap;
}

/* テーブルセル */
td {
    padding: 4px 2px;
    text-align: center;
    border: 1px solid #333;
    font-size: 12px;
}

/* 列幅 */
.col-day {
    width: 55px;
}

.col-weekday {
    width: 40px;
}

.col-time {
    width: 80px;
}

.col-remarks {
    min-width: 80px;
}

/* 行の背景色 */
tr.weekday {
    background-color: #B0E0E6;
}

tr.saturday {
    background-color: #FFFF99;
}

tr.sunday {
    background-color: #FFFF99;
}

/* 入力フィールド */
td input[type="time"] {
    width: 75px;
    padding: 2px;
    border: 1px solid #333;
    text-align: center;
    font-size: 12px;
    background-color: white;
}

td input[type="text"].time-input {
    width: 60px;
    padding: 2px;
    border: 1px solid #333;
    text-align: center;
    font-size: 12px;
    background-color: white;
}

/*td input[type="text"].remarks-input {
    width: 95%;
    padding: 2px;
    border: 1px solid #333;
    font-size: 12px;
}*/

/* ドロップダウン用のスタイル（新規追加） */
td select.remarks-input {
    width: 95%;
    padding: 2px;
    border: 1px solid #333;
    font-size: 12px;
    background-color: white;
    text-align: left;
    appearance: auto; /* ドロップダウン矢印を表示 */
}


/* 読み取り専用セル */
.readonly-cell {
    background-color: #E8F4F8;
    font-weight: normal;
}

/* 土日の読み取り専用セルは行の背景色を継承 */
tr.saturday .readonly-cell,
tr.sunday .readonly-cell {
    background-color: #FFFF99;
}

/* 合計行 */
.summary-row {
    background-color: #B0E0E6 !important;
    font-weight: bold;
}

.summary-label {
    font-size: 13px;
    padding: 8px;
    text-align: center;
}

.summary-value {
    font-size: 13px;
    padding: 8px;
    font-weight: bold;
    color: #000;
}

/* ==========================================
   ボタンエリア
   ========================================== */
.buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 15px;
}

/* アクションボタン */
.action-btn {
    padding: 12px 50px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #000;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.save-btn {
    background-color: #4169E1;
}

.save-btn:hover {
    background-color: #3158D0;
}

.export-btn {
    background-color: #4169E1;
}

.export-btn:hover {
    background-color: #3158D0;
}

/* ==========================================
   レスポンシブ
   ========================================== */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .action-btn {
        width: 100%;
    }
}