/* ── Calendar module ─────────────────────────────────────────────────────── */

/* Цвета типов событий (работают в обеих темах через alpha) */
:root {
    --event-meeting: #60a5fa;   /* blue */
    --event-meeting-bg: rgba(96, 165, 250, 0.18);
    --event-call: #34d399;      /* green */
    --event-call-bg: rgba(52, 211, 153, 0.18);
    --event-task: #a78bfa;      /* violet */
    --event-task-bg: rgba(167, 139, 250, 0.18);
    --event-deadline: #f87171;  /* red */
    --event-deadline-bg: rgba(248, 113, 113, 0.2);
}
[data-theme="light"] {
    --event-meeting: #2563eb;
    --event-meeting-bg: rgba(37, 99, 235, 0.12);
    --event-call: #059669;
    --event-call-bg: rgba(5, 150, 105, 0.12);
    --event-task: #7c3aed;
    --event-task-bg: rgba(124, 58, 237, 0.12);
    --event-deadline: #dc2626;
    --event-deadline-bg: rgba(220, 38, 38, 0.12);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.calendar-toolbar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.calendar-toolbar-left,
.calendar-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.calendar-view-tabs {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.calendar-view-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 7px 14px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.calendar-view-btn:hover { background: var(--surface2); color: var(--text); }
.calendar-view-btn.active {
    background: var(--primary);
    color: #fff;
}
.calendar-nav {
    display: flex;
    gap: 4px;
}
.calendar-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    margin-left: 8px;
    text-transform: capitalize;
}
.calendar-type-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cal-type-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    cursor: pointer;
    user-select: none;
    background: var(--surface2);
    color: var(--text);
}
.cal-type-chip input { margin: 0; accent-color: currentColor; }
.cal-type-chip.cal-type-meeting { color: var(--event-meeting); border-color: var(--event-meeting); }
.cal-type-chip.cal-type-call { color: var(--event-call); border-color: var(--event-call); }
.cal-type-chip.cal-type-task { color: var(--event-task); border-color: var(--event-task); }
.cal-type-chip.cal-type-deadline { color: var(--event-deadline); border-color: var(--event-deadline); }

/* ── Body + Drawer ───────────────────────────────────────────────────────── */
.calendar-body {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: calc(100vh - 220px);
    min-height: 520px;
}
.calendar-el {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    overflow: auto;
}
.calendar-drawer {
    width: 360px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    box-shadow: var(--shadow);
    animation: cal-slide-in var(--transition-smooth);
}
@keyframes cal-slide-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.calendar-drawer-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.calendar-drawer-title {
    flex: 1;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.calendar-drawer-body { font-size: var(--text-sm); color: var(--text); }
.calendar-drawer-body .cal-field {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.calendar-drawer-body .cal-field-label {
    width: 110px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.calendar-drawer-body .cal-field-value { flex: 1; word-break: break-word; }
.calendar-drawer-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── FullCalendar theme override ─────────────────────────────────────────── */
.fc {
    --fc-border-color: var(--border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--surface2);
    --fc-list-event-hover-bg-color: var(--surface2);
    --fc-today-bg-color: rgba(14, 165, 233, 0.08);
    --fc-now-indicator-color: var(--danger);
    --fc-event-border-color: transparent;
    color: var(--text);
    font-family: inherit;
}
.fc .fc-toolbar-title { color: var(--text); font-size: var(--text-lg); font-weight: 600; }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--text-muted);
    text-decoration: none;
}
.fc .fc-day-today .fc-daygrid-day-number { color: var(--primary); font-weight: 700; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--border); }
.fc .fc-list-event-title a { color: var(--text); }
.fc .fc-list-day-cushion { background: var(--surface2); }
.fc .fc-event {
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    padding: 1px 4px;
    font-size: var(--text-xs);
    cursor: pointer;
}
.fc .fc-event:hover { filter: brightness(1.1); }
.fc .fc-event.cal-event-done { opacity: 0.55; text-decoration: line-through; }
.fc .fc-event.cal-event-cancelled { opacity: 0.45; text-decoration: line-through; }

/* Типы событий */
.fc .fc-event.cal-type-meeting {
    background: var(--event-meeting-bg);
    border-left: 3px solid var(--event-meeting);
    color: var(--event-meeting);
}
.fc .fc-event.cal-type-call {
    background: var(--event-call-bg);
    border-left: 3px solid var(--event-call);
    color: var(--event-call);
}
.fc .fc-event.cal-type-task {
    background: var(--event-task-bg);
    border-left: 3px solid var(--event-task);
    color: var(--event-task);
}
.fc .fc-event.cal-type-deadline {
    background: var(--event-deadline-bg);
    border-left: 3px solid var(--event-deadline);
    color: var(--event-deadline);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .calendar-toolbar { flex-direction: column; align-items: stretch; }
    .calendar-toolbar-left, .calendar-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .calendar-body {
        flex-direction: column;
        height: auto;
    }
    .calendar-drawer {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        z-index: 1100;
    }
    .calendar-title { font-size: var(--text-sm); }
    .calendar-view-btn { padding: 6px 10px; font-size: var(--text-xs); }
}