/* ====================================================================
 * カレンダー固有のスタイル (calendar.html 専用)
 * ==================================================================== */

/* 月間カレンダーグリッド (PC版 Outlook風) */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--dm-outline-variant);
    border: 1px solid var(--dm-outline-variant);
    border-radius: var(--dm-rounded-lg);
    overflow: hidden;
}

.calendar-cell {
    background-color: var(--dm-surface);
    min-height: 140px;
    padding: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
}
.dark .calendar-cell {
    background-color: var(--dm-surface);
}
.calendar-cell:hover {
    background-color: var(--dm-surface-dim);
}
.calendar-cell.is-today {
    background-color: rgba(56, 161, 219, 0.05);
}
.calendar-cell.is-other-month {
    opacity: 0.5;
    background-color: var(--dm-surface-dim);
}

/* セル内の日付数値 */
.cal-date-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
    align-self: flex-start;
    margin-left: 4px;
    margin-top: 2px;
}
.calendar-cell.is-today .cal-date-num {
    background-color: #38a1db; /* 露草色 */
    color: white;
    font-weight: bold;
}

/* セル内の放送アイテム (ブロック型) */
.cal-item {
    padding: 3px 6px;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    background-color: rgba(56, 161, 219, 0.1);
    color: var(--dm-on-surface);
    border-left: 3px solid #38a1db;
    transition: transform 0.1s;
}
.dark .cal-item {
    background-color: rgba(56, 161, 219, 0.15);
    color: var(--dm-on-surface-dark);
}
.cal-item:hover {
    transform: scale(1.02);
    z-index: 10;
    position: relative;
}

.cal-item.is-favorite {
    border-left-color: #b7282e; /* 茜色 */
    background-color: rgba(183, 40, 46, 0.1);
}
.dark .cal-item.is-favorite {
    background-color: rgba(183, 40, 46, 0.15);
}

/* ハイライトアニメーション */
@keyframes highlight-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(56, 161, 219, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(56, 161, 219, 0.5);
    }
}
.cal-item.is-highlighted {
    animation: highlight-pulse 1.5s ease-in-out 3;
    border-left-color: #38a1db;
    background-color: rgba(56, 161, 219, 0.2);
}

/* 曜日ヘッダー */
.calendar-weekday-header {
    background-color: var(--dm-surface-dim);
    padding: 8px 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dm-on-surface);
    border-bottom: 1px solid var(--dm-outline-variant);
}

/* 放送局フィルタのグループとレイアウト崩れ対策 */
.filter-container {
    /* クリック時の横揺れ防止 */
    overflow-x: hidden;
}
.channel-category {
    margin-bottom: 16px;
}
.channel-category-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dm-on-surface);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--dm-outline-variant);
    padding-bottom: 4px;
}
.channel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* カスタムチェックボックス (アクセシビリティ対応) */
.channel-checkbox {
    /* display: none; はタブフォーカスが当たらなくなるため使用しない */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* キーボードフォーカス時のスタイル */
.channel-checkbox:focus-visible + .channel-label {
    outline: 2px solid #38a1db;
    outline-offset: 2px;
}
.channel-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    background-color: var(--dm-surface-dim);
    border: 1px solid var(--dm-outline-variant);
    transition: all 0.2s;
    user-select: none;
}
.channel-checkbox:checked + .channel-label {
    background-color: #38a1db;
    color: white;
    border-color: #38a1db;
}
.dark .channel-checkbox:checked + .channel-label {
    background-color: #38a1db;
    color: white;
}

/* モバイル向け アジェンダビュー (Outlook Mobile風) */
.agenda-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.agenda-header {
    /* 横スクロール可能な日付選択バー */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    gap: 8px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--dm-outline-variant);
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--dm-outline-variant) transparent;
}

/* スクロールバーのカスタマイズ (Chrome/Safari/Edge) */
.agenda-header::-webkit-scrollbar {
    height: 6px;
}
.agenda-header::-webkit-scrollbar-track {
    background: transparent;
}
.agenda-header::-webkit-scrollbar-thumb {
    background-color: var(--dm-outline-variant);
    border-radius: 10px;
}
.dark .agenda-header::-webkit-scrollbar-thumb {
    background-color: #334155;
}
.agenda-date-btn {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 60px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.agenda-date-btn:hover {
    background-color: var(--dm-surface-dim);
}
.agenda-date-btn.is-selected {
    background-color: #38a1db;
    color: white;
    box-shadow: 0 4px 12px rgba(56, 161, 219, 0.3);
}
.agenda-date-btn .wday {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-bottom: 2px;
}
.agenda-date-btn .day {
    font-size: 1.1rem;
    font-weight: bold;
}
.agenda-date-btn.is-today:not(.is-selected) {
    border-color: #38a1db;
    color: #38a1db;
}

/* 月切り替えボタン */
.month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--dm-rounded-full);
    border: 1px solid var(--dm-outline-variant);
    background: var(--dm-surface);
    color: var(--dm-on-surface);
    cursor: pointer;
    transition: all 0.2s ease;
}

.month-nav-btn:hover:not(:disabled) {
    border-color: #38a1db;
    color: #38a1db;
}

.month-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ====================================================================
 * チュートリアルモーダルの微調整
 * ==================================================================== */
.tutorial-slide {
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s ease;
}
#tutorial-dots span {
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s ease;
}