/**
 * trailcam.css
 * Styles for Trail Camera Motion Events Viewer
 * Integrates with Country Geek framework (W3.CSS)
 * 
 * @author Christian Gosselin
 * @date 2025-Nov-13
 */

/* Main container styles */
#divTrailCamContent {
    max-width: 1400px;
    margin: 0 auto;
}

/* Event card hover effect */
.w3-card-4 {
    transition: all 0.3s ease;
}

.w3-hover-shadow:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2) !important;
    transform: translateY(-5px);
}

/* Thumbnail container */
.event-thumbnail {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.event-thumbnail img {
    transition: transform 0.3s ease;
}

.w3-card-4:hover .event-thumbnail img {
    transform: scale(1.05);
}

/* Motion badge */
.w3-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
}

/* Statistics cards */
.w3-container.w3-blue,
.w3-container.w3-green,
.w3-container.w3-orange {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.w3-container.w3-blue:hover,
.w3-container.w3-green:hover,
.w3-container.w3-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Controls section */
.w3-container[style*="background:#f8f9fa"] {
    border-bottom: 2px solid #dee2e6;
}

/* Input and select styling */
#divTrailCamContent input[type="date"],
#divTrailCamContent select {
    transition: border-color 0.3s;
}

#divTrailCamContent input[type="date"]:focus,
#divTrailCamContent select:focus {
    border-color: #2196F3 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

/* Button styling */
.w3-button {
    transition: all 0.3s ease;
}

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

.w3-button:active {
    transform: translateY(0);
}

/* Loading spinner */
.fa-spinner.w3-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty state styling */
.w3-panel.w3-center i.fa-camera {
    opacity: 0.3;
}

/* Full image modal */
#divFullImageModal .w3-modal-content {
    background-color: #fefefe;
    border-radius: 8px;
    overflow: hidden;
}

#fullImageDisplay {
    display: block;
    margin: 0 auto;
}

/* Card animation on delete */
[data-event-id] {
    transition: opacity 0.3s, transform 0.3s;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    #divTrailCamContent .w3-third {
        width: 100% !important;
    }
    
    .w3-row-padding .w3-third {
        margin-bottom: 16px;
    }
}

@media (max-width: 600px) {
    /* Stack buttons vertically on mobile */
    #divTrailCamContent .w3-half {
        width: 100% !important;
        margin-bottom: 8px;
    }
    
    /* Adjust stat card text size */
    .w3-container.w3-blue div[style*="font-size:3em"],
    .w3-container.w3-green div[style*="font-size:3em"],
    .w3-container.w3-orange div[style*="font-size:2em"] {
        font-size: 2em !important;
    }
    
    /* Make header logo smaller */
    #divTrailCamHeader img {
        width: 64px !important;
        height: 64px !important;
    }
}

/* Token input form styling */
#txtCamToken {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* Table styling within cards */
.w3-card-4 .w3-table {
    margin: 10px 0;
}

.w3-card-4 .w3-table td {
    padding: 4px 8px;
    border: none;
}

/* Filename truncation */
.w3-card-4 .w3-table td[style*="font-size:0.8em"] {
    word-break: break-all;
    max-width: 150px;
}

/* Hover effect for clickable elements */
.w3-card-4 .w3-button {
    cursor: pointer;
}

/* Icon sizing consistency */
.fa-calendar,
.fa-eye,
.fa-trash {
    margin-right: 5px;
}

/* Ensure proper spacing */
#eventsContainer {
    min-height: 300px;
}

/* Success/Error message styling */
.w3-panel.w3-red,
.w3-panel.w3-green {
    border-radius: 4px;
    padding: 16px;
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    animation: slideInRight 0.4s ease-out;
    font-size: 16px;
    font-weight: 500;
    min-width: 300px;
}

.notification-toast.show {
    display: flex;
}

.notification-toast.error {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.notification-toast.info {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.notification-toast.warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.notification-toast i {
    font-size: 24px;
}

@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;
    }
}

.notification-toast.hiding {
    animation: slideOutRight 0.4s ease-in;
}

/* Button disabled state */
.w3-button:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .notification-toast {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
    }
}