/**
 * カレンダー表示用カスタムCSS
 * JavaScript sticky実装: sticky-table-header.jsと連携
 */

/* ========================================
   カレンダーラッパー: 横スクロール設定
   ======================================== */
.calendar-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* ========================================
   日付列: 横スクロール時も固定
   ======================================== */
.sticky-date-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #ffffff !important; /* Bootstrap .bg-white */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    font-size: 1rem; /* 日付を大きく表示 */
}

/* ========================================
   モバイル: テーブル幅を調整
   ======================================== */
@media (max-width: 768px) {
    #calendar-table {
        font-size: 0.875rem; /* 14px */
    }

    #calendar-table th,
    #calendar-table td {
        padding: 0.5rem 0.25rem;
    }
}

/* ========================================
   アクセシビリティ: フォーカス時の視認性向上
   ======================================== */
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}