/* /css/quick_tools/calendar_tool.css */
/* Quick Tools: Company Calendar & External Sync Component Styles */

/* Filter Chips */
.cal-filter-chip {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid var(--bs-border-color-translucent);
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    color: var(--bs-secondary-color);
    transition: all 0.2s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cal-filter-chip.active {
    background: rgba(var(--bs-body-bg-rgb), 0.95);
    color: var(--bs-body-color);
    border-color: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cal-filter-chip.active.chip-company {
    border-color: #3b82f6;
    color: #3b82f6;
}

.cal-filter-chip.active.chip-external {
    border-color: #10b981;
    color: #10b981;
}

.cal-filter-chip.active.chip-vacations {
    border-color: #f59e0b;
    color: #f59e0b;
}

.cal-filter-chip.active.chip-birthdays {
    border-color: #ec4899;
    color: #ec4899;
}

/* Calendar Month Matrix Grid */
.calendar-grid-container {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--bs-border-color-translucent);
    overflow: hidden;
    background: rgba(var(--bs-body-bg-rgb), 0.5);
}

.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.8);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

.calendar-grid-header .weekday-cell {
    padding: 9px 4px;
}

.calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(88px, 1fr);
}

.cal-day-cell {
    border-right: 1px solid var(--bs-border-color-translucent);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background-color 0.15s ease;
    cursor: pointer;
    min-height: 88px;
    background: rgba(var(--bs-body-bg-rgb), 0.25);
}

.cal-day-cell:nth-child(7n) {
    border-right: none;
}

.cal-day-cell:hover {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.7);
}

.cal-day-cell.other-month {
    opacity: 0.38;
    background: rgba(0, 0, 0, 0.02);
}

.cal-day-cell.is-today {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.cal-day-cell.is-today .cal-day-number {
    background-color: var(--apple-accent-color, #6c63ff);
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px var(--button-glow, rgba(108, 99, 255, 0.4));
}

.cal-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.cal-day-number {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--bs-body-color);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-day-events-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: hidden;
}

/* Event Chips inside Day Cell */
.cal-event-chip {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal-event-chip:hover {
    transform: translateX(2px);
    opacity: 0.92;
}

.cal-event-chip.color-blue {
    background: rgba(59, 130, 246, 0.16);
    color: #2563eb;
    border-left-color: #3b82f6;
}

.cal-event-chip.color-green {
    background: rgba(16, 185, 129, 0.16);
    color: #059669;
    border-left-color: #10b981;
}

.cal-event-chip.color-yellow {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
    border-left-color: #f59e0b;
}

.cal-event-chip.color-red {
    background: rgba(239, 68, 68, 0.16);
    color: #dc2626;
    border-left-color: #ef4444;
}

.cal-event-chip.color-purple {
    background: rgba(236, 72, 153, 0.16);
    color: #db2777;
    border-left-color: #ec4899;
}

.cal-event-chip.color-gray {
    background: rgba(107, 114, 128, 0.16);
    color: #4b5563;
    border-left-color: #6b7280;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .cal-event-chip.color-blue { color: #60a5fa; }
[data-bs-theme="dark"] .cal-event-chip.color-green { color: #34d399; }
[data-bs-theme="dark"] .cal-event-chip.color-yellow { color: #fbbf24; }
[data-bs-theme="dark"] .cal-event-chip.color-red { color: #f87171; }
[data-bs-theme="dark"] .cal-event-chip.color-purple { color: #f472b6; }
[data-bs-theme="dark"] .cal-event-chip.color-gray { color: #9ca3af; }

/* Agenda Card View */
.cal-agenda-card {
    border-radius: 14px;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background: rgba(var(--bs-body-bg-rgb), 0.65);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cal-agenda-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.cal-agenda-card.border-cat-blue { border-left: 4px solid #3b82f6 !important; }
.cal-agenda-card.border-cat-green { border-left: 4px solid #10b981 !important; }
.cal-agenda-card.border-cat-yellow { border-left: 4px solid #f59e0b !important; }
.cal-agenda-card.border-cat-red { border-left: 4px solid #ef4444 !important; }
.cal-agenda-card.border-cat-purple { border-left: 4px solid #ec4899 !important; }