/* FullCalendar 내부 타이틀 잘림 방지(기존 유지) */
#calendar .fc-dayGridMonth-view .agg-event .fc-event-main,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-main-frame,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-title-container,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-title {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
}

/* FullCalendar 내부 타이틀 구조 때문에 텍스트가 잘리는 문제 방지 */
#calendar .fc-dayGridMonth-view .agg-event .fc-event-main,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-main-frame,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-title-container,
#calendar .fc-dayGridMonth-view .agg-event .fc-event-title {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;

    white-space: nowrap !important;
    overflow: visible !important;    /* ✅ '건' 잘림 방지 */
    text-overflow: clip !important;
    color: inherit !important;
}

/* =========================================================
    FullCalendar grid lines (dayGrid + timeGrid)

    NOTE)
    - FullCalendar 기본 CSS는 .fc-theme-standard 에 --fc-border-color: #ddd 를 둡니다.
    - 다크모드에서 “하얀 실선”처럼 보이는 경우가 있어, 변수 지정 + 요소 보더를 강제합니다.
    - 변수는 #calendar 뿐 아니라 .fc 루트에도 같이 걸어, 어떤 뷰(month/week/day)에서도
      동일하게 먹도록 합니다.
   ========================================================= */

/* 라이트 기본 */
#calendar,
#calendar .fc {
    --fc-border-color: rgba(148, 163, 184, 0.18);
}

/* ✅ 다크: data-theme 기준 (더 어두운 회색 톤) */
html[data-theme="dark"] #calendar,
html[data-theme="dark"] #calendar .fc {
    /* ✅ 다크에서 너무 밝게 보이지 않도록 알파를 낮춤 */
    --fc-border-color: rgba(148, 163, 184, 0.10);
}

/* ✅ 다크에서 “흰 실선”이 남는 케이스를 위해 border-color를 직접 강제 */
html[data-theme="dark"] #calendar .fc-theme-standard td,
html[data-theme="dark"] #calendar .fc-theme-standard th,
html[data-theme="dark"] #calendar .fc-scrollgrid,
html[data-theme="dark"] #calendar .fc-scrollgrid td,
html[data-theme="dark"] #calendar .fc-scrollgrid th,
html[data-theme="dark"] #calendar .fc-scrollgrid-section > td,
html[data-theme="dark"] #calendar .fc-scrollgrid-section-header > td,
html[data-theme="dark"] #calendar .fc-scrollgrid-section-body > td,
html[data-theme="dark"] #calendar .fc-col-header-cell,
html[data-theme="dark"] #calendar .fc-daygrid-day,
/* timeGrid(주/일) */
html[data-theme="dark"] #calendar .fc-timegrid-slot,
html[data-theme="dark"] #calendar .fc-timegrid-slot-lane,
html[data-theme="dark"] #calendar .fc-timegrid-axis,
html[data-theme="dark"] #calendar .fc-timegrid-divider,
html[data-theme="dark"] #calendar .fc-timegrid-col,
html[data-theme="dark"] #calendar .fc-timegrid-col-frame,
html[data-theme="dark"] #calendar .fc-timegrid-body,
html[data-theme="dark"] #calendar .fc-timegrid-cols {
    border-color: var(--fc-border-color) !important;
}

/* ✅ FullCalendar 그리드(월/주/일) 보더를 한 번에 통일 */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th,
#calendar .fc-scrollgrid,
#calendar .fc-scrollgrid td,
#calendar .fc-scrollgrid th,
#calendar .fc-scrollgrid-section > td,
#calendar .fc-scrollgrid-section-header > td,
#calendar .fc-scrollgrid-section-body > td,
#calendar .fc-col-header-cell,
#calendar .fc-daygrid-day,
/* timeGrid(주/일) */
#calendar .fc-timegrid-slot,
#calendar .fc-timegrid-slot-lane,
#calendar .fc-timegrid-axis,
#calendar .fc-timegrid-divider,
#calendar .fc-timegrid-col,
#calendar .fc-timegrid-col-frame,
#calendar .fc-timegrid-body,
#calendar .fc-timegrid-cols {
    border-color: var(--fc-border-color) !important;
}

/* =========================================================
    주말(토/일) 색상 - 한국 달력 스타일
   ========================================================= */

/* 요일 헤더 */
#calendar .fc-col-header-cell.fc-day-sun,
#calendar .fc-col-header-cell.fc-day-sun a {
    color: #ef4444 !important;
}

#calendar .fc-col-header-cell.fc-day-sat,
#calendar .fc-col-header-cell.fc-day-sat a {
    color: #3b82f6 !important;
}

/* 날짜 숫자 */
#calendar .fc-daygrid-day.fc-day-sun .fc-daygrid-day-number {
    color: #ef4444 !important;
}

#calendar .fc-daygrid-day.fc-day-sat .fc-daygrid-day-number {
    color: #3b82f6 !important;
}

/* =========================================================
    1순위 UX
    - 오늘 강조
    - 선택일 강조
   ========================================================= */

#calendar .fc-daygrid-day.fc-day-today,
#calendar .fc-timegrid-col.fc-day-today {
    background: rgba(59, 130, 246, 0.10);
}

html[data-theme="dark"] #calendar .fc-daygrid-day.fc-day-today,
html[data-theme="dark"] #calendar .fc-timegrid-col.fc-day-today {
    background: rgba(59, 130, 246, 0.16);
}

/* 선택일 (JS에서 .is-selected-day 부여) */
#calendar .fc-daygrid-day.is-selected-day,
#calendar .fc-timegrid-col.is-selected-day {
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.65);
}

html[data-theme="dark"] #calendar .fc-daygrid-day.is-selected-day,
html[data-theme="dark"] #calendar .fc-timegrid-col.is-selected-day {
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.75);
}

/* =========================================================
    1순위 UX - hover tooltip
   ========================================================= */

.event-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    font-size: 12px;
    line-height: 1.35;
}

.event-tooltip .tt-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.event-tooltip .tt-row {
    color: var(--muted);
}

/* =========================================================
    3순위 UX - 상태 바(얇은 색 바)
   ========================================================= */

.fc-event .status-bar {
    height: 3px;
    border-radius: 999px;
    margin: 2px 6px 4px 6px;
    opacity: 0.95;
}

/* ===============================
   Assignee Picker
================================ */

.assignee-picker {
    position: relative;
}

#assigneeToggle.input-like {
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
}

.assignee-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    z-index: 50;
}

.assignee-list.hidden {
    display: none;
}

.assignee-item {
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.assignee-item:hover {
    background: rgba(0,0,0,0.05);
}

html[data-theme="dark"] .assignee-item:hover {
    background: rgba(255,255,255,0.08);
}

/* fixed floating menu (모달 내부 스크롤/클리핑 방지용) */
.assignee-float {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    padding: 6px;
}

.assignee-float .assignee-item {
    display: block;
    width: 100%;
    border-radius: 10px;
}


/* 플로팅 메뉴가 셀렉트처럼 "딱 붙어" 보이도록 라운드 조정 (v1.4.6) */
.assignee-picker .input-like.assignee-open-down {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.assignee-picker .input-like.assignee-open-up {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.assignee-float.assignee-open-down {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.assignee-float.assignee-open-up {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === Compact calendar sizing (v1.3.9) === */
#calendar .fc .fc-header-toolbar {
    margin-bottom: 6px;
}
#calendar .fc .fc-toolbar-title {
    font-size: 22px;
    font-weight: 800;
}
/* 캘린더 버튼 사용시 눌림효과(월간/주간/일간 버튼 활성상태) */
#calendar .fc .fc-button {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}

#calendar .fc .fc-button.fc-button-active,
#calendar .fc .fc-button.active{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}

#calendar .fc .fc-daygrid-day-number {
    font-size: 12px;
    padding: 4px 6px;
}
#calendar .fc .fc-col-header-cell-cushion {
    font-size: 12px;
}

/* =========================================================
   Light theme - FullCalendar button tone fix (robust)
   - #calendar 자체가 .fc 루트인 케이스 대응
   ========================================================= */

/* ✅ 변수는 #calendar와 #calendar .fc 둘 다 잡아야 안전 */
html:not([data-theme="dark"]) #calendar,
html:not([data-theme="dark"]) #calendar .fc {
    --fc-button-bg-color: #ffffff;
    --fc-button-border-color: var(--border);
    --fc-button-text-color: var(--text);

    --fc-button-hover-bg-color: var(--surface);
    --fc-button-hover-border-color: var(--border);
    --fc-button-hover-text-color: var(--text);

    --fc-button-active-bg-color: var(--primary);
    --fc-button-active-border-color: var(--primary);
    --fc-button-active-text-color: var(--primary-contrast);
}

/* ✅ FullCalendar 기본 .fc-button-primary가 덮는 경우 대비(보험용) */
html:not([data-theme="dark"]) #calendar .fc-button-primary {
    background: var(--fc-button-bg-color) !important;
    border-color: var(--fc-button-border-color) !important;
    color: var(--fc-button-text-color) !important;
}

html:not([data-theme="dark"]) #calendar .fc-button-primary:hover {
    background: var(--fc-button-hover-bg-color) !important;
    border-color: var(--fc-button-hover-border-color) !important;
    color: var(--fc-button-hover-text-color) !important;
}

html:not([data-theme="dark"]) #calendar .fc-button-primary.fc-button-active,
html:not([data-theme="dark"]) #calendar .fc-button-primary:active {
    background: var(--fc-button-active-bg-color) !important;
    border-color: var(--fc-button-active-border-color) !important;
    color: var(--fc-button-active-text-color) !important;
}

html:not([data-theme="dark"]) #calendar .fc .fc-button.fc-button-active {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

/* v2.0.0c: 캘린더 월 전환 애니메이션 */
.fc-view-harness {
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}

.slide-out-left {
    transform: translateX(-30px);
    opacity: 0;
}

.slide-out-right {
    transform: translateX(30px);
    opacity: 0;
}

.slide-in-left {
    animation: slideInLeft 0.25s forwards;
}

.slide-in-right {
    animation: slideInRight 0.25s forwards;
}

@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =========================================================
   Toggle Side Panel (Reservation Form)
   ========================================================= */
.container {
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 30px; /* Create space between calendar and panel */
}

.container.panel-collapsed {
    grid-template-columns: 1fr 0px;
    /* 폈을 때와 동일하게 약간의 공간을 유지합니다 */
    gap: 30px;
}

.container.panel-collapsed aside.panel {
    /* To prevent the panel from squishing its content */
    overflow: visible;
}

/* Important: In panel-collapsed state, fade out everything inside panel EXCEPT the toggle button */
.container.panel-collapsed aside.panel .panel-card {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

aside.panel {
    position: relative;
    transform-origin: right;
    overflow: visible !important;
}

aside.panel .panel-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: var(--panel-width); /* Fix width so it doesn't shrink */
}
/* Sidebar Toggle Button - MUST be a direct child of aside.panel, NOT inside panel-card */
.toggle-side-btn {
    position: absolute;
    left: -24px;
    top: 100px;
    width: 24px;
    height: 48px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 10px;
    color: var(--muted);
    box-shadow: -4px 0 10px rgba(0,0,0,0.05);
    transition: all 0.2s;
    /* Ensure button never fades out */
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

.toggle-side-btn:hover {
    color: var(--text);
    background: var(--panel-2);
    width: 28px;
    left: -28px;
}

/* Collapsed state adjustments for button */
.container.panel-collapsed .toggle-side-btn {
    left: -24px;
    border: 1px solid var(--border);
    /* 오른쪽 테두리는 계속 none으로 두어 우측 여백과 자연스럽게 이어지도록 함 */
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 15px rgba(0,0,0,0.1);
    background: var(--panel);
    color: var(--text);
}

.container.panel-collapsed .toggle-side-btn:hover {
    left: -28px;
    width: 28px;
}

/* Target Type Selector (v2.2.2) */
.target-type-selector {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 12px;
    background: var(--panel-2);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    align-items: center;
    justify-content: flex-start;
}

.target-type-selector label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.2s;
    white-space: nowrap;
    margin: 0;
}

.target-type-selector input[type="radio"] {
    width: auto !important;
    height: auto !important;
    margin: 0;
    cursor: pointer;
}

.target-type-selector label:has(input:checked) {
    color: var(--primary);
}

/* Sidebar & Modal Form Spacing Standardization (v2.2.2) */
.panel-body .label,
.edit-form .label {
    margin: 12px 0 6px 0 !important; /* Uniform top and bottom margin for labels */
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: block;
}

.panel-body .label:first-child,
.edit-form .label:first-child {
    margin-top: 0 !important; /* Remove top margin for the first label */
}

.panel-body input,
.panel-body select,
.panel-body textarea,
.panel-body .target-type-selector,
.panel-body .assignee-picker,
.edit-form input,
.edit-form select,
.edit-form textarea,
.edit-form .assignee-picker {
    margin-bottom: 4px !important; /* Standardize bottom spacing for input fields */
}

.panel-body .hint,
.edit-form .hint {
    margin-top: 4px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.panel-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}