/* ========================================
   Houston Energy Calendar - Custom Styles
   Vintage Astros Color Palette
   ======================================== */

/* FullCalendar Customization */
:root {
    --fc-border-color: #e5e7eb;
    --fc-button-bg-color: #EB6E1F;
    --fc-button-border-color: #EB6E1F;
    --fc-button-hover-bg-color: #C06014;
    --fc-button-hover-border-color: #C06014;
    --fc-button-active-bg-color: #002D62;
    --fc-button-active-border-color: #002D62;
    --fc-today-bg-color: rgba(255, 184, 77, 0.1);
}

/* Calendar toolbar styling */
.fc .fc-toolbar-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.fc .fc-button {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 3px rgba(235, 110, 31, 0.3);
}

/* Calendar grid */
.fc .fc-daygrid-day-number {
    font-weight: 600;
    color: #374151;
    padding: 0.25rem;
}

.fc .fc-col-header-cell {
    background-color: #f9fafb;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 0.75rem 0;
}

/* Event styling by category */
.fc-event {
    border-radius: 4px;
    border-left-width: 4px;
    padding: 4px 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    min-height: 3em;
    line-height: 1.3;
}

.fc-event:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Allow event titles to wrap to show more text - max 3 lines with ellipsis */
.fc-event-title {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    text-overflow: ellipsis;
}

/* Make conference titles bold and prominent */
.fc-event-title.conference-title {
    font-weight: 700;
}

.fc-event-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Increase day cell minimum height for better event visibility */
.fc .fc-daygrid-day-frame {
    min-height: 120px;
}

/* Category-specific event colors */
.event-geology {
    background-color: #FFB84D;
    border-color: #F4911E;
    color: #1f2937;
}

.event-geophysics {
    background-color: #2E5090;
    border-color: #1e3a6d;
    color: #ffffff;
}

.event-engineering {
    background-color: #C06014;
    border-color: #8b4410;
    color: #ffffff;
}

.event-business {
    background-color: #3D6B3D;
    border-color: #2d4f2d;
    color: #ffffff;
}

.event-other {
    background-color: #444455;
    border-color: #2a2a35;
    color: #ffffff;
}

/* Today's date highlighting */
.fc .fc-day-today {
    background-color: rgba(255, 184, 77, 0.1) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background-color: #EB6E1F;
    color: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Modal styling */
#event-modal {
    backdrop-filter: blur(4px);
}

.modal-header {
    background: linear-gradient(135deg, #0B1426 0%, #002D62 100%);
    color: white;
    padding: 1.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.modal-header button {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.modal-header button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.modal-header button:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.modal-body {
    padding: 1.5rem;
}

.org-badge {
    display: inline-block;
    background-color: #EB6E1F;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
    }

    .fc .fc-button {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    .fc-event {
        font-size: 0.65rem;
    }
}

/* List View Styling - Make events clearly clickable */
.fc-list-event {
    cursor: pointer !important;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.fc-list-event:hover {
    background-color: rgba(235, 110, 31, 0.1) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fc-list-event:active {
    background-color: rgba(235, 110, 31, 0.2) !important;
}

.fc-list-event-dot {
    border-width: 5px !important;
    margin-right: 0.5rem;
}

.fc-list-event-title {
    cursor: pointer;
    font-weight: 500;
}

/* Category colors for list view dots and borders */
.fc-list-event.event-geology .fc-list-event-dot {
    border-color: #FFB84D !important;
}

.fc-list-event.event-geology {
    border-left-color: #F4911E;
}

.fc-list-event.event-geophysics .fc-list-event-dot {
    border-color: #2E5090 !important;
}

.fc-list-event.event-geophysics {
    border-left-color: #2E5090;
}

.fc-list-event.event-engineering .fc-list-event-dot {
    border-color: #C06014 !important;
}

.fc-list-event.event-engineering {
    border-left-color: #C06014;
}

.fc-list-event.event-production .fc-list-event-dot { /* legacy — same as business */
    border-color: #3D6B3D !important;
}

.fc-list-event.event-production {
    border-left-color: #3D6B3D;
}

.fc-list-event.event-business .fc-list-event-dot {
    border-color: #3D6B3D !important;
}

.fc-list-event.event-business {
    border-left-color: #3D6B3D;
}

.fc-list-event.event-other .fc-list-event-dot {
    border-color: #444455 !important;
}

.fc-list-event.event-other {
    border-left-color: #444455;
}

/* Make list view items more touch-friendly on mobile */
@media (max-width: 768px) {
    .fc-list-event {
        padding: 0.75rem 0.5rem !important;
        min-height: 3.5rem;
    }

    .fc-list-event-title {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .fc-list-event-time {
        font-size: 0.8rem;
    }
}

/* Scrollbar styling for filter panel and sidebar widgets */
#organization-list::-webkit-scrollbar,
#news-feed::-webkit-scrollbar,
#upcoming-events::-webkit-scrollbar,
#conference-countdowns::-webkit-scrollbar,
#left-sidebar::-webkit-scrollbar {
    width: 6px;
}

#organization-list::-webkit-scrollbar-track,
#news-feed::-webkit-scrollbar-track,
#upcoming-events::-webkit-scrollbar-track,
#conference-countdowns::-webkit-scrollbar-track,
#left-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#organization-list::-webkit-scrollbar-thumb,
#news-feed::-webkit-scrollbar-thumb,
#upcoming-events::-webkit-scrollbar-thumb,
#conference-countdowns::-webkit-scrollbar-thumb,
#left-sidebar::-webkit-scrollbar-thumb {
    background: #EB6E1F;
    border-radius: 3px;
}

#organization-list::-webkit-scrollbar-thumb:hover,
#news-feed::-webkit-scrollbar-thumb:hover,
#upcoming-events::-webkit-scrollbar-thumb:hover,
#conference-countdowns::-webkit-scrollbar-thumb:hover,
#left-sidebar::-webkit-scrollbar-thumb:hover {
    background: #C06014;
}

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text truncation utilities for sidebar widgets */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Organizations page - category filter buttons */
.category-filter-btn {
    transition: all 0.2s ease;
    opacity: 0.8;
}

.category-filter-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-filter-btn.active {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* Event Selection Styling */
.event-selected {
    box-shadow: 0 0 0 3px rgba(235, 110, 31, 0.5) !important;
    position: relative;
    z-index: 10;
}

.event-checkmark {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(22, 163, 74, 0.95);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

/* Selection mode cursor */
.selection-mode-active .fc-event {
    cursor: pointer !important;
}

.selection-mode-active .fc-list-event {
    cursor: pointer !important;
}

/* Selection mode hover effect */
.selection-mode-active .fc-event:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 2px rgba(235, 110, 31, 0.3);
}

.selection-mode-active .fc-list-event:hover {
    background-color: rgba(235, 110, 31, 0.15) !important;
}

/* List view selected events */
.fc-list-event.event-selected {
    background-color: rgba(235, 110, 31, 0.1) !important;
    border-left: 4px solid #EB6E1F !important;
}

.fc-list-event .event-checkmark {
    position: relative;
    top: auto;
    right: auto;
    margin-left: 0.5rem;
    display: inline-flex;
}

/* ========================================
   Mobile Toolbar Scroll Hint
   ======================================== */

/* On small screens the FullCalendar toolbar can overflow on narrow phones.
   Make the header-toolbar row horizontally scrollable and add a right-edge
   gradient so users know they can scroll to see all buttons. */
@media (max-width: 640px) {
    .fc .fc-header-toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #EB6E1F transparent;
        padding-bottom: 4px;
    }

    /* Visible orange scrollbar (WebKit/Blink) */
    .fc .fc-header-toolbar::-webkit-scrollbar {
        height: 4px;
    }

    .fc .fc-header-toolbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .fc .fc-header-toolbar::-webkit-scrollbar-thumb {
        background: #EB6E1F;
        border-radius: 3px;
    }

    /* Each chunk no longer needs to be centered when the bar scrolls */
    .fc .fc-header-toolbar .fc-toolbar-chunk {
        flex-shrink: 0;
    }
}

/* Right-edge fade div injected just before #calendar in the HTML.
   Sits at the top-right of the calendar card to hint the toolbar scrolls. */
.fc-toolbar-scroll-hint {
    display: none;
}

@media (max-width: 640px) {
    .fc-toolbar-scroll-hint {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 3.5rem;      /* covers the toolbar row */
        background: linear-gradient(to right, transparent, white 85%);
        pointer-events: none;
        z-index: 5;
        border-top-right-radius: 0.5rem;
    }

    .dark .fc-toolbar-scroll-hint {
        background: linear-gradient(to right, transparent, #1f2937 85%);
    }
}

/* ========================================
   Dark Mode Styles
   ======================================== */

/* Dark mode FullCalendar variables */
.dark {
    --fc-border-color: #374151;
    --fc-today-bg-color: rgba(235, 110, 31, 0.1);
}

/* Calendar toolbar dark mode */
.dark .fc .fc-toolbar-title {
    color: #e5e7eb;
}

/* Calendar grid dark mode */
.dark .fc .fc-daygrid-day-number {
    color: #d1d5db;
}

.dark .fc .fc-col-header-cell {
    background-color: #1f2937;
    color: #9ca3af;
}

/* Day cells dark mode */
.dark .fc .fc-daygrid-day {
    background-color: #111827;
}

.dark .fc .fc-day-other {
    background-color: #0f172a;
    opacity: 0.3;
}

/* Today's date dark mode */
.dark .fc .fc-day-today {
    background-color: rgba(235, 110, 31, 0.15) !important;
}

/* List view dark mode */
.dark .fc-list {
    border-color: #374151;
}

.dark .fc-list-event:hover {
    background-color: rgba(235, 110, 31, 0.15) !important;
}

.dark .fc-list-day-cushion {
    background-color: #1f2937;
}

.dark .fc-list-event {
    background-color: #111827;
}

.dark .fc-list-event-title,
.dark .fc-list-event-time {
    color: #e5e7eb;
}

/* List view dates in dark mode - use orange for visibility */
.dark .fc-list-day-text,
.dark .fc-list-day-side-text {
    color: #EB6E1F !important;
    font-weight: 600;
}

.dark .fc-list-day {
    background-color: #1f2937 !important;
}

/* ── Dark mode: apply solid category colors to events ──────────────────────────
   In light mode, month-grid events show full colored backgrounds.
   The generic .dark .fc-list-event rule above overrides that with a dark bg,
   leaving only the small dot as a color cue in list view on mobile.
   Restore solid category colors in dark mode for both views. */

/* Grid (month) view — dark mode */
.dark .fc-event.event-geology     { background-color: #FFB84D; border-color: #F4911E; color: #1f2937; }
.dark .fc-event.event-geophysics  { background-color: #2E5090; border-color: #1e3a6d; color: #ffffff; }
.dark .fc-event.event-engineering { background-color: #C06014; border-color: #8b4410; color: #ffffff; }
.dark .fc-event.event-business    { background-color: #3D6B3D; border-color: #2d4f2d; color: #ffffff; }
.dark .fc-event.event-other       { background-color: #444455; border-color: #2a2a35; color: #ffffff; }

/* List (mobile) view — dark mode: same solid colors, override the generic dark bg */
.dark .fc-list-event.event-geology     { background-color: #FFB84D !important; color: #1f2937 !important; }
.dark .fc-list-event.event-geophysics  { background-color: #2E5090 !important; color: #ffffff !important; }
.dark .fc-list-event.event-engineering { background-color: #C06014 !important; color: #ffffff !important; }
.dark .fc-list-event.event-business    { background-color: #3D6B3D !important; color: #ffffff !important; }
.dark .fc-list-event.event-other       { background-color: #444455 !important; color: #ffffff !important; }

/* Keep the left border matching each category in dark list view */
.dark .fc-list-event.event-geology     { border-left-color: #F4911E !important; }
.dark .fc-list-event.event-geophysics  { border-left-color: #1e3a6d !important; }
.dark .fc-list-event.event-engineering { border-left-color: #8b4410 !important; }
.dark .fc-list-event.event-business    { border-left-color: #2d4f2d !important; }
.dark .fc-list-event.event-other       { border-left-color: #2a2a35 !important; }

/* All dark-mode list event titles/times use white for consistent readability */
.dark .fc-list-event[class*="event-"] .fc-list-event-title,
.dark .fc-list-event[class*="event-"] .fc-list-event-time { color: #ffffff !important; }

/* Modal dark mode */
.dark .modal-body {
    background-color: #1f2937;
    color: #e5e7eb;
}

.dark .modal-body h3 {
    color: #f3f4f6;
}

.dark .modal-body p {
    color: #d1d5db;
}

/* Scrollbar dark mode */
.dark #organization-list::-webkit-scrollbar-track,
.dark #news-feed::-webkit-scrollbar-track,
.dark #upcoming-events::-webkit-scrollbar-track,
.dark #conference-countdowns::-webkit-scrollbar-track,
.dark #left-sidebar::-webkit-scrollbar-track {
    background: #374151;
}

.dark #organization-list::-webkit-scrollbar-thumb,
.dark #news-feed::-webkit-scrollbar-thumb,
.dark #upcoming-events::-webkit-scrollbar-thumb,
.dark #conference-countdowns::-webkit-scrollbar-thumb,
.dark #left-sidebar::-webkit-scrollbar-thumb {
    background: #EB6E1F;
}

.dark #organization-list::-webkit-scrollbar-thumb:hover,
.dark #news-feed::-webkit-scrollbar-thumb:hover,
.dark #upcoming-events::-webkit-scrollbar-thumb:hover,
.dark #conference-countdowns::-webkit-scrollbar-thumb:hover,
.dark #left-sidebar::-webkit-scrollbar-thumb:hover {
    background: #C06014;
}

/* Print styles */
@media print {
    header, footer, aside {
        display: none;
    }

    .fc .fc-button {
        display: none;
    }

    main {
        max-width: 100%;
        padding: 0;
    }
}