/* Bay Brothers OS - Custom Calendar Styling */
/* Professional calendar design matching Bay Brothers brand */

/* ============ CALENDAR CONTAINER ============ */
#calendar {
    --fc-border-color: var(--bb-border-color, #dee2e6);
    --fc-button-bg-color: var(--bb-primary, #0b4f6c);
    --fc-button-border-color: var(--bb-primary, #0b4f6c);
    --fc-button-hover-bg-color: var(--bb-primary-light, #1e6b8a);
    --fc-button-hover-border-color: var(--bb-primary-light, #1e6b8a);
    --fc-button-active-bg-color: var(--bb-primary-dark, #094158);
    --fc-button-active-border-color: var(--bb-primary-dark, #094158);
    
    --fc-event-bg-color: var(--bb-primary, #0b4f6c);
    --fc-event-border-color: var(--bb-primary, #0b4f6c);
    --fc-event-text-color: #ffffff;
    
    --fc-today-bg-color: rgba(11, 79, 108, 0.08);
    --fc-neutral-bg-color: var(--bb-bg-secondary, #f8f9fa);
    --fc-neutral-text-color: var(--bb-text-secondary, #6c757d);
    
    --fc-page-bg-color: var(--bb-bg-primary, #ffffff);
    
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bb-bg-primary, #ffffff);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ============ DARK MODE OVERRIDES ============ */
[data-bs-theme="dark"] #calendar {
    --fc-border-color: var(--bb-border-color, #30363d);
    --fc-button-bg-color: var(--bb-primary, #4fa8c5);
    --fc-button-border-color: var(--bb-primary, #4fa8c5);
    --fc-button-hover-bg-color: var(--bb-primary-light, #6bb8d1);
    --fc-button-hover-border-color: var(--bb-primary-light, #6bb8d1);
    
    --fc-today-bg-color: rgba(79, 168, 197, 0.1);
    --fc-neutral-bg-color: var(--bb-bg-secondary, #161b22);
    --fc-neutral-text-color: var(--bb-text-secondary, #8b949e);
    --fc-page-bg-color: var(--bb-bg-primary, #0d1117);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) #calendar {
        --fc-border-color: var(--bb-border-color, #30363d);
        --fc-button-bg-color: var(--bb-primary, #4fa8c5);
        --fc-today-bg-color: rgba(79, 168, 197, 0.1);
        --fc-neutral-bg-color: var(--bb-bg-secondary, #161b22);
        --fc-page-bg-color: var(--bb-bg-primary, #0d1117);
    }
}

/* ============ CALENDAR HEADER ============ */
.fc .fc-toolbar {
    padding: 1rem;
    background: linear-gradient(135deg, var(--bb-bg-secondary, #f8f9fa), var(--bb-bg-primary, #ffffff));
    border-bottom: 2px solid var(--bb-border-color, #dee2e6);
    margin-bottom: 0 !important;
}

[data-bs-theme="dark"] .fc .fc-toolbar {
    background: linear-gradient(135deg, var(--bb-bg-secondary, #161b22), var(--bb-bg-primary, #0d1117));
}

.fc .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bb-text-primary, #212529);
    margin: 0;
}

.fc .fc-button {
    background-color: var(--bb-primary, #0b4f6c) !important;
    border-color: var(--bb-primary, #0b4f6c) !important;
    color: #ffffff !important;
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    text-transform: capitalize;
}

.fc .fc-button:hover {
    background-color: var(--bb-primary-light, #1e6b8a) !important;
    border-color: var(--bb-primary-light, #1e6b8a) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.fc .fc-button:active,
.fc .fc-button-active {
    background-color: var(--bb-primary-dark, #094158) !important;
    border-color: var(--bb-primary-dark, #094158) !important;
    transform: translateY(0);
}

.fc .fc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile button text sizing */
@media (max-width: 768px) {
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
    }
    
    .fc .fc-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ============ CALENDAR GRID ============ */
.fc .fc-view {
    background-color: var(--bb-bg-primary, #ffffff);
}

.fc .fc-scrollgrid {
    border-color: var(--bb-border-color, #dee2e6) !important;
    border-radius: 0.5rem;
    overflow: hidden;
}

.fc th {
    background-color: var(--bb-bg-secondary, #f8f9fa) !important;
    border-color: var(--bb-border-color, #dee2e6) !important;
    color: var(--bb-text-primary, #212529) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.75rem 0.5rem;
}

.fc td {
    border-color: var(--bb-border-color, #dee2e6) !important;
    background-color: var(--bb-bg-primary, #ffffff);
}

/* ============ DAY CELLS ============ */
.fc .fc-daygrid-day {
    transition: background-color 0.2s ease;
}

.fc .fc-daygrid-day:hover {
    background-color: var(--bb-bg-secondary, #f8f9fa);
}

.fc .fc-daygrid-day-number {
    color: var(--bb-text-primary, #212529);
    font-weight: 500;
    padding: 0.5rem;
}

.fc .fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
    position: relative;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--bb-primary, #0b4f6c);
    color: #ffffff !important;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

[data-bs-theme="dark"] .fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--bb-primary, #4fa8c5);
}

.fc .fc-day-past {
    background-color: var(--bb-bg-secondary, #f8f9fa);
    opacity: 0.7;
}

.fc .fc-day-disabled {
    background-color: var(--bb-bg-tertiary, #e9ecef);
    opacity: 0.5;
}

/* ============ TIME GRID (Week/Day Views) ============ */
.fc .fc-timegrid-slot {
    height: 3rem;
    border-color: var(--bb-border-light, #e9ecef) !important;
}

.fc .fc-timegrid-slot-label {
    color: var(--bb-text-secondary, #6c757d);
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}

.fc .fc-col-header-cell {
    background: linear-gradient(180deg, var(--bb-bg-secondary, #f8f9fa), var(--bb-bg-primary, #ffffff)) !important;
    padding: 0.75rem 0.5rem;
}

.fc .fc-timegrid-axis {
    background-color: var(--bb-bg-secondary, #f8f9fa);
}

/* Current time indicator */
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--bb-danger, #dc3545);
    border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--bb-danger, #dc3545);
}

/* ============ EVENTS ============ */
.fc-event {
    border-radius: 0.375rem !important;
    border: none !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.fc-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

.fc-event-dragging {
    opacity: 0.7;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

.fc-event-selected {
    box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.4) !important;
}

[data-bs-theme="dark"] .fc-event-selected {
    box-shadow: 0 0 0 3px rgba(79, 168, 197, 0.4) !important;
}

/* Event title */
.fc-event-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-event-time {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Event type styling - Multiday events */
.fc-event-main {
    padding: 0.25rem;
}

.fc-daygrid-event {
    margin: 2px 4px;
}

/* ============ LIST VIEW (Mobile Agenda) ============ */
.fc-list {
    border-color: var(--bb-border-color, #dee2e6) !important;
}

.fc-list-event {
    transition: background-color 0.2s ease;
}

.fc-list-event:hover {
    background-color: var(--bb-bg-secondary, #f8f9fa) !important;
    cursor: pointer;
}

.fc-list-event-dot {
    border-color: currentColor !important;
}

.fc-list-event-title {
    color: var(--bb-text-primary, #212529);
    font-weight: 500;
}

.fc-list-event-time {
    color: var(--bb-text-secondary, #6c757d);
}

.fc-list-day-cushion {
    background-color: var(--bb-bg-secondary, #f8f9fa) !important;
    padding: 0.5rem 1rem;
}

.fc-list-day-text {
    color: var(--bb-primary, #0b4f6c) !important;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-list-day-side-text {
    color: var(--bb-text-secondary, #6c757d) !important;
    font-size: 0.875rem;
}

.fc-list-empty {
    background-color: var(--bb-bg-secondary, #f8f9fa);
    padding: 2rem;
    text-align: center;
    color: var(--bb-text-muted, #868e96);
}

/* ============ BUSINESS HOURS BACKGROUND ============ */
.fc .fc-non-business {
    background-color: repeating-linear-gradient(
        45deg,
        var(--bb-bg-secondary, #f8f9fa),
        var(--bb-bg-secondary, #f8f9fa) 10px,
        var(--bb-bg-tertiary, #e9ecef) 10px,
        var(--bb-bg-tertiary, #e9ecef) 20px
    );
    opacity: 0.6;
}

[data-bs-theme="dark"] .fc .fc-non-business {
    background-color: repeating-linear-gradient(
        45deg,
        var(--bb-bg-secondary, #161b22),
        var(--bb-bg-secondary, #161b22) 10px,
        var(--bb-bg-tertiary, #21262d) 10px,
        var(--bb-bg-tertiary, #21262d) 20px
    );
}

/* ============ POPOVER / TOOLTIP ============ */
.fc .fc-popover {
    background-color: var(--bb-bg-primary, #ffffff);
    border: 1px solid var(--bb-border-color, #dee2e6);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

.fc .fc-popover-header {
    background-color: var(--bb-bg-secondary, #f8f9fa);
    color: var(--bb-text-primary, #212529);
    padding: 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bb-border-color, #dee2e6);
}

/* ============ MORE LINK ============ */
.fc .fc-more-link {
    color: var(--bb-primary, #0b4f6c) !important;
    font-weight: 600;
    font-size: 0.75rem;
}

.fc .fc-more-link:hover {
    color: var(--bb-primary-light, #1e6b8a) !important;
    text-decoration: underline;
}

/* ============ SCROLLBAR STYLING ============ */
.fc-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fc-scroller::-webkit-scrollbar-track {
    background: var(--bb-bg-secondary, #f8f9fa);
    border-radius: 4px;
}

.fc-scroller::-webkit-scrollbar-thumb {
    background: var(--bb-border-dark, #6c757d);
    border-radius: 4px;
}

.fc-scroller::-webkit-scrollbar-thumb:hover {
    background: var(--bb-primary, #0b4f6c);
}

/* ============ LOADING STATE ============ */
.fc-loading {
    position: relative;
}

.fc-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme="dark"] .fc-loading::after {
    background-color: rgba(13, 17, 23, 0.8);
}

/* ============ CUSTOM EVENT STYLES ============ */
/* Job Status Colors */
.fc-event.job-scheduled {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.fc-event.job-in-progress {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
}

.fc-event.job-completed {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.fc-event.job-cancelled {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.fc-event.google-event {
    background-color: #9333ea !important;
    border-color: #9333ea !important;
}

/* Synced indicator */
.fc-event.synced::before {
    content: '??';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ============ DRAG HELPER ============ */
.fc-event-dragging {
    opacity: 0.7;
}

.fc-event-resizing {
    opacity: 0.7;
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .fc .fc-button {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.125rem;
        text-align: center;
    }
    
    /* List view optimizations */
    .fc-list-event {
        padding: 0.75rem;
    }
    
    .fc-list-event-title {
        font-size: 0.9rem;
    }
}

/* ============ HIGHLIGHTS & EFFECTS ============ */
/* Weekend highlighting */
.fc .fc-day-sat,
.fc .fc-day-sun {
    background-color: rgba(11, 79, 108, 0.02);
}

[data-bs-theme="dark"] .fc .fc-day-sat,
[data-bs-theme="dark"] .fc .fc-day-sun {
    background-color: rgba(79, 168, 197, 0.03);
}

/* Current time slot highlight in time grid */
.fc .fc-timegrid-slot.fc-timegrid-slot-lane:hover {
    background-color: rgba(11, 79, 108, 0.05);
}

[data-bs-theme="dark"] .fc .fc-timegrid-slot.fc-timegrid-slot-lane:hover {
    background-color: rgba(79, 168, 197, 0.08);
}

/* ============ EMPTY CALENDAR MESSAGE ============ */
.calendar-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bb-text-muted, #868e96);
    z-index: 1;
}

.calendar-empty-state i {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* ============ GOOGLE CALENDAR CONNECTION PROMPT ============ */
.google-calendar-prompt {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    max-width: 300px;
}

@media (max-width: 768px) {
    .google-calendar-prompt {
        position: relative;
        top: 0;
        right: 0;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* ============ EVENT DETAILS IN POPOVER ============ */
.event-detail-popup {
    padding: 0.5rem;
}

.event-detail-popup .event-title {
    font-weight: 600;
    color: var(--bb-text-primary, #212529);
    margin-bottom: 0.5rem;
}

.event-detail-popup .event-meta {
    font-size: 0.8rem;
    color: var(--bb-text-secondary, #6c757d);
}

.event-detail-popup .event-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

/* ============ CALENDAR LOADING SKELETON ============ */
.calendar-skeleton {
    width: 100%;
    height: 600px;
    background: linear-gradient(
        90deg,
        var(--bb-bg-secondary, #f8f9fa) 25%,
        var(--bb-bg-tertiary, #e9ecef) 50%,
        var(--bb-bg-secondary, #f8f9fa) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============ ACCESSIBILITY ============ */
.fc-event:focus {
    outline: 3px solid var(--bb-primary, #0b4f6c);
    outline-offset: 2px;
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(11, 79, 108, 0.5);
    outline: none;
}

[data-bs-theme="dark"] .fc .fc-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 168, 197, 0.5);
}

/* High contrast for keyboard navigation */
.fc-event:focus-visible {
    outline: 3px solid var(--bb-primary, #0b4f6c);
    outline-offset: 3px;
}

/* ============ PRINT STYLES ============ */
@media print {
    .fc .fc-toolbar {
        background: none !important;
        border: none !important;
    }
    
    .fc-event {
        box-shadow: none !important;
    }
    
    .fc .fc-button {
        display: none !important;
    }
}

/* ============ ENHANCED JOB MODAL STYLES ============ */
.job-modal-content {
    padding: 0.5rem 0;
}

.status-banner {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid;
}

.status-banner.status-scheduled {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
    border-left-color: #0d6efd;
}

.status-banner.status-inprogress {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border-left-color: #ffc107;
}

.status-banner.status-completed {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.1), rgba(25, 135, 84, 0.05));
    border-left-color: #198754;
}

.status-banner.status-cancelled {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
    border-left-color: #dc3545;
}

.info-card {
    background: var(--bb-bg-secondary, #f8f9fa);
    border: 1px solid var(--bb-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.info-card-header {
    background: linear-gradient(135deg, rgba(11, 79, 108, 0.05), rgba(11, 79, 108, 0.02));
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bb-border-color, #dee2e6);
    display: flex;
    align-items: center;
}

.info-card-body {
    padding: 0.75rem;
}

[data-bs-theme="dark"] .info-card {
    background: var(--bb-bg-secondary, #161b22);
    border-color: var(--bb-border-color, #30363d);
}

[data-bs-theme="dark"] .info-card-header {
    background: linear-gradient(135deg, rgba(79, 168, 197, 0.08), rgba(79, 168, 197, 0.03));
    border-bottom-color: var(--bb-border-color, #30363d);
}

/* ============ TOAST ANIMATIONS ============ */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.custom-toast {
    animation: slideInRight 0.3s ease;
}

/* Mobile toast positioning */
@media (max-width: 768px) {
    .custom-toast {
        right: 10px !important;
        left: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
}

/* ============ EMPTY STATE STYLING ============ */
.calendar-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

.calendar-empty-state i {
    font-size: 4rem;
    color: var(--bb-text-muted, #adb5bd);
    margin-bottom: 1rem;
    display: block;
}

.calendar-empty-state p {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bb-text-secondary, #6c757d);
    margin-bottom: 0.5rem;
}

.calendar-empty-state small {
    color: var(--bb-text-muted, #adb5bd);
}

/* ============ MOBILE SWIPE FEEDBACK ============ */
@media (max-width: 768px) {
    #calendar {
        touch-action: pan-y;
        user-select: none;
    }
    
    /* Add subtle visual feedback during swipe */
    .fc-view-harness {
        transition: opacity 0.2s ease;
    }
    
    .fc-view-harness.swiping {
        opacity: 0.7;
    }
}

/* ============ FILTER CHECKBOX ENHANCEMENTS ============ */
.form-check-input:checked {
    background-color: var(--bb-primary, #0b4f6c);
    border-color: var(--bb-primary, #0b4f6c);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--bb-primary, #4fa8c5);
    border-color: var(--bb-primary, #4fa8c5);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

.form-check-label .badge {
    pointer-events: none;
}

/* ============ MOBILE OPTIMIZATIONS ============ */
@media (max-width: 768px) {
    /* Larger touch targets */
    .fc-event {
        min-height: 2rem;
        padding: 0.5rem;
    }
    
    /* Better tap highlighting */
    .fc-event {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Prevent zoom on double-tap */
    .fc {
        touch-action: manipulation;
    }
}

/* ============ DARK MODE SPECIFIC ADJUSTMENTS ============ */
[data-bs-theme="dark"] .status-banner.status-scheduled {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(13, 110, 253, 0.08));
}

[data-bs-theme="dark"] .status-banner.status-inprogress {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
}

[data-bs-theme="dark"] .status-banner.status-completed {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.15), rgba(25, 135, 84, 0.08));
}

[data-bs-theme="dark"] .status-banner.status-cancelled {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.08));
}