/*
 * 管理画面カレンダー（PerformanceCalendar）の見た目。
 * saade/filament-fullcalendar v4.0.1 の resources/css/filament-fullcalendar.css は Tailwind の @apply を使うため
 * カスタムテーマ（Tailwind ビルド）が要る。本アプリはテーマを持たないので、同じ内容を素の CSS で書き、
 * FilamentAsset で登録する（AppServiceProvider）。FullCalendar 本体の CSS は JS が注入する。
 * 江原氏側の CSS は .kw-cal-event--{種別} と .kw-cal-legend（と __item・__check・__swatch）に当てる想定。
 * 凡例は 10/26 に ul/li から fieldset/label（チェック欄。KYODOWEST-39）に変えた。要素型ではなくクラスで当てること。
 */
.filament-fullcalendar {
    --fc-small-font-size: var(--text-sm);
    /* FullCalendar の既定は白（#fff）で、ダークモードでは曜日見出しが白地に白文字になる（2026-10-12 実機）。セクションの背景に合わせる */
    --fc-page-bg-color: var(--color-white);
    --fc-neutral-bg-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent);
    --fc-border-color: color-mix(in oklab, var(--color-gray-950) 10%, transparent);
    --fc-highlight-color: color-mix(in oklab, var(--primary-500) 5%, transparent);
    --fc-today-bg-color: color-mix(in oklab, var(--primary-500) 5%, transparent);
    --fc-button-text-color: var(--primary-900);
    --fc-button-bg-color: var(--primary-400);
    --fc-button-border-color: transparent;
    --fc-button-hover-bg-color: var(--primary-300);
    --fc-button-hover-border-color: transparent;
    --fc-button-active-bg-color: var(--primary-300);
    --fc-button-active-border-color: transparent;
    --fc-event-bg-color: var(--primary-400);
    --fc-event-border-color: var(--primary-400);
    --fc-event-text-color: var(--primary-900);
    /* マウスを乗せた行の背景（予定リストの行）。neutral-bg（5%）より少し濃く、浮く程度。
       ダークは下で --kw-cal-hover-bg だけを白に替える（var() は同じ要素の計算値で解決されるので、参照の行はここの 1 回でよい）（KYODOWEST-58） */
    --kw-cal-hover-bg: color-mix(in oklab, var(--color-gray-950) 8%, transparent);
    --fc-list-event-hover-bg-color: var(--kw-cal-hover-bg);
}

html.dark .filament-fullcalendar {
    --fc-page-bg-color: var(--color-gray-900);
    --fc-neutral-bg-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    --fc-border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    --fc-button-text-color: var(--primary-950);
    --fc-button-bg-color: var(--primary-600);
    --fc-button-hover-bg-color: var(--primary-500);
    --fc-button-active-bg-color: var(--primary-500);
    --fc-event-bg-color: var(--primary-600);
    --fc-event-border-color: var(--primary-600);
    --fc-event-text-color: var(--primary-950);
    /* FullCalendar の既定（#f5f5f5）はダークでは文字と重なって読めない（11/1 石川、KYODOWEST-58） */
    --kw-cal-hover-bg: color-mix(in oklab, var(--color-white) 8%, transparent);
}

/* 高さは予定の数で伸びる（height: auto）。予定の少ない月も週が潰れないよう、セルの下限を持つ。td の height は下限として働く。
   .fc-daygrid-day-frame に min-height を書くと既定の 100% を消し、行が伸びたときに祝日の背景が途中で切れる */
.filament-fullcalendar .fc-daygrid-day {
    height: 6.5rem;
}

/* 帯は折り返して全文を出す（既定は 1 行で切る）。会場名まで読めないと「アーティスト名（会場名）」の意味が無い。スクロールは許容（KYODOWEST-74） */
.filament-fullcalendar .fc-daygrid-event,
.filament-fullcalendar .fc-daygrid-event .fc-event-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

.filament-fullcalendar .fc-button {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
}

.filament-fullcalendar .fc-button:not([disabled]):focus-visible {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-500) 50%, transparent) !important;
}

html.dark .filament-fullcalendar .fc-button:not([disabled]):focus-visible {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-400) 50%, transparent) !important;
}

.filament-fullcalendar .fc-button[disabled] {
    cursor: default;
    opacity: 0.7;
}

.filament-fullcalendar .fc-view table,
.filament-fullcalendar .fc-view:not(.fc-list) table th,
.filament-fullcalendar .fc-list {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.filament-fullcalendar .fc-list {
    overflow: hidden;
}

.filament-fullcalendar .fc-list .fc-list-event-title a {
    cursor: pointer;
}

.filament-fullcalendar .fc-list-sticky .fc-list-day th {
    background: inherit;
}

/* 予定は閲覧ビューへのリンク。種別ごとの色はここ（CalendarEventType::cssClass と対）。白文字で読める濃さ */
.filament-fullcalendar .kw-cal-event {
    cursor: pointer;
    --fc-event-text-color: #ffffff;
}

.kw-cal-event--performance {
    --fc-event-bg-color: #b45309; /* amber-700 */
    --fc-event-border-color: #b45309;
    --kw-cal-color: #b45309;
}

.kw-cal-event--sale_start {
    --fc-event-bg-color: #1d4ed8; /* blue-700 */
    --fc-event-border-color: #1d4ed8;
    --kw-cal-color: #1d4ed8;
}

.kw-cal-event--advance_sale {
    --fc-event-bg-color: #0f766e; /* teal-700 */
    --fc-event-border-color: #0f766e;
    --kw-cal-color: #0f766e;
}

.kw-cal-event--display_start {
    --fc-event-bg-color: #6d28d9; /* violet-700 */
    --fc-event-border-color: #6d28d9;
    --kw-cal-color: #6d28d9;
}

.kw-cal-event--announcement {
    --fc-event-bg-color: #be185d; /* pink-700 */
    --fc-event-border-color: #be185d;
    --kw-cal-color: #be185d;
}

/* 祝日の名前（KYODOWEST-56。PerformanceCalendar::HOLIDAY_EVENT_CLASS）。色は --kw-cal-holiday-color 1 つ（日付の数字・背景と共通。江原氏側の CSS で差し替える） */
.filament-fullcalendar {
    --kw-cal-holiday-color: #dc2626; /* red-600 */
}

.kw-cal-event--holiday {
    --fc-event-bg-color: var(--kw-cal-holiday-color);
    --fc-event-border-color: var(--kw-cal-holiday-color);
    --kw-cal-color: var(--kw-cal-holiday-color);
}

/*
 * 祝日の予定はクリックを元から届かせない（月表示・予定リストとも）。url の無い予定を押すとプラグインの JS が $wire.onEventClick を呼んで
 * サーバーへ往復するため（FullCalendar の interactive: false はカーソルと tabindex だけ。10/31 実画面）。背景の予定も同じ（名前の帯を透過した
 * クリックが背景の予定に当たると往復が起きた。11/1 実画面）。空のセルのクリックは往復しない
 */
.filament-fullcalendar .fc-event.kw-cal-event--holiday,
.filament-fullcalendar .kw-cal-day--holiday {
    pointer-events: none;
}

/*
 * 日曜と祝日の日付の数字（赤）。土曜は色を付けない（要望 41「土曜のピンクをやめる」。祝日でない限り平日と同じ）。祝日のセルは背景の予定（display: background、PerformanceCalendar::HOLIDAY_DAY_CLASS）で薄く塗り、
 * 数字は :has() でそのセルに当てる。印刷は背景が落ちるので文字色で残る。色は江原氏側の CSS で上書きできる。
 * 予定リスト（listMonth）では日曜の見出しも同じ色にする。祝日の見出しは色を付けない（背景の予定はリストに描かれず、祝日の名前の行が赤で並ぶ）
 */
.filament-fullcalendar .fc-day-sun .fc-daygrid-day-number,
.filament-fullcalendar .fc-day-sun .fc-col-header-cell-cushion,
.filament-fullcalendar .fc-list-day.fc-day-sun .fc-list-day-text,
.filament-fullcalendar .fc-list-day.fc-day-sun .fc-list-day-side-text,
.filament-fullcalendar .fc-day:has(.kw-cal-day--holiday) .fc-daygrid-day-number {
    color: var(--kw-cal-holiday-color);
}

.filament-fullcalendar .kw-cal-day--holiday {
    background: var(--kw-cal-holiday-color);
    opacity: 0.08;
}

/* ダークモードは地が暗く 0.08 では同化するので濃くする */
html.dark .filament-fullcalendar .kw-cal-day--holiday {
    opacity: 0.2;
}

/* 凡例（種類の表示の切替を兼ねる。KYODOWEST-39）。border・margin-inline・min-inline-size・padding は fieldset の既定を消す */
.kw-cal-legend {
    border: 0;
    margin-inline: 0;
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    font-size: var(--text-sm);
    padding: 0;
}

.kw-cal-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

/* 操作できない見本（祝日。チェックが無い） */
.kw-cal-legend__item--static {
    cursor: default;
}

.kw-cal-legend__check {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-600);
}

/* 凡例の色見本は予定と同じ種別クラス（.kw-cal-event--*）から色を取る */
.kw-cal-legend__swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.1875rem;
    background: var(--kw-cal-color, currentColor);
}