/* Main Styles */
body {
    padding-top: 60px;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.card {
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

.document-card {
    transition: transform 0.2s;
}

.document-card:hover {
    transform: translateY(-5px);
}

.file-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.pdf-icon { color: #e74c3c; }
.document-icon { color: #3498db; }
.spreadsheet-icon { color: #2ecc71; }
.image-icon { color: #9b59b6; }
.video-icon { color: #e67e22; }
.other-icon { color: #95a5a6; }

.flash-messages {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1000;
    max-width: 300px;
}

/* Chat Message Badge Styles */
.navbar-nav .nav-link .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
    border-radius: 10px;
    position: relative;
    top: -2px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Dashboard Styles */
.analytics-card {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
}

/* Category Card Hover Effect */
.card-hover {
    transition: all 0.2s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.card-hover:hover .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Storage Cards Styles */
.storage-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
}

.storage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #6c757d;
}

.storage-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.storage-value {
    font-weight: 700;
    font-size: 1.75rem;
}

.storage-progress {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f8f9fa;
}

.storage-progress .progress-bar {
    transition: width 0.6s ease;
}

/* Document Viewer Styles */
.document-viewer {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.document-content {
    position: relative;
    transition: transform 0.3s ease;
}

/* Enhanced PDF Toolbar */
.pdf-toolbar {
    background: linear-gradient(135deg, #4a4a4a, #2d2d2d) !important;
    border-bottom: 2px solid #0d6efd;
    z-index: 10;
}

.pdf-toolbar .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border: none;
    transition: all 0.2s ease;
}

.pdf-toolbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Enhanced Image Viewer */
.image-toolbar {
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.image-toolbar:hover {
    background: rgba(0,0,0,0.8) !important;
}

#imageContainer {
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

#imageViewer {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    cursor: grab;
}

#imageViewer:active {
    cursor: grabbing;
}

/* Enhanced Video Player */
#videoViewer {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Enhanced Office Document Viewer */
.office-toolbar {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border-bottom: 2px solid #0d6efd;
}

.office-toolbar select {
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.office-toolbar .btn {
    border-radius: 6px;
    transition: all 0.2s ease;
}

.office-toolbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Enhanced Generic File Viewer */
.document-content.alert {
    border: 2px dashed #0d6efd;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.document-content.alert:hover {
    border-color: #0b5ed7;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    transform: translateY(-2px);
}

/* Rotation Controls Header */
.rotation-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    box-shadow: 0 2px 10px rgba(13, 110, 253, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.rotation-header:hover {
    box-shadow: 0 4px 20px rgba(13, 110, 253, 0.4);
}

.rotation-header .btn {
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.rotation-header .btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.rotation-header .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Fullscreen Mode Enhancements */
.document-viewer:fullscreen {
    background: #000;
}

.document-viewer:fullscreen .document-content {
    height: 100vh !important;
}

.document-viewer:fullscreen .pdf-toolbar,
.document-viewer:fullscreen .office-toolbar {
    background: rgba(0,0,0,0.9) !important;
}

.document-viewer:fullscreen .image-toolbar {
    background: rgba(0,0,0,0.8) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pdf-toolbar,
    .office-toolbar {
        flex-wrap: wrap;
        gap: 4px !important;
    }
    
    .pdf-toolbar .btn,
    .office-toolbar .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .image-toolbar {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-bottom: 10px;
        border-radius: 8px;
    }
    
    .rotation-header .btn {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    .document-content {
        height: 500px !important;
    }
    
    #imageContainer {
        height: 400px !important;
    }
}

/* Print Styles */
@media print {
    .pdf-toolbar,
    .office-toolbar,
    .image-toolbar,
    .rotation-header {
        display: none !important;
    }
    
    .document-content {
        height: auto !important;
        transform: none !important;
    }
}

.document-viewer iframe {
    border-radius: 0.25rem;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.document-viewer img {
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    transform-origin: center center;
    display: block;
    margin: 0 auto;
}

.document-viewer video {
    border-radius: 0.25rem;
    transform-origin: center center;
}

/* Sticky Header for Document Viewer */
.card-header.sticky-top {
    background-color: #0d6efd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(24, 22, 22, 0.2);
}

/* Table Header Styling */
.table thead th {
    background-color: #0d6efd !important;
    color: white !important;
    font-weight: 600;
    border-bottom: 2px solid #0b5ed7;
    text-align: center;
    vertical-align: middle;
    padding: 12px 8px;
    transition: background-color 0.2s ease;
}

.table thead th:hover {
    background-color: #0b5ed7 !important;
}

/* Override Bootstrap's table-light class */
.table-light thead th {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Search Button Styling */
.btn-group .btn:has(i.bi-search), 
button[type="submit"]:has(i.bi-search),
.btn:has(i.bi-search) {
    background-color: #0d6efd !important;
    color: white !important;
    border-color: #0d6efd !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-group .btn:has(i.bi-search):hover,
button[type="submit"]:has(i.bi-search):hover,
.btn:has(i.bi-search):hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

.btn-group .btn:has(i.bi-search):active,
button[type="submit"]:has(i.bi-search):active,
.btn:has(i.bi-search):active {
    background-color: #0a58ca !important;
    border-color: #09539d !important;
    transform: translateY(0);
}

/* Alternative selector for better browser compatibility */
.btn-light:has(.bi-search),
button.btn-light[title*="Apply Filters"] {
    background-color: #0d6efd !important;
    color: white !important;
    border-color: #0d6efd !important;
}

.btn-light:has(.bi-search):hover,
button.btn-light[title*="Apply Filters"]:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

/* Table Action Buttons */
table .btn-group .btn-sm {
    min-width: 38px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

table .btn-group .btn-sm i {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Rotation Controls */
.btn-group .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-outline-light {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Ensure rotation works properly */
#imageViewer, #pdfViewer {
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
}

/* Prevent header from rotating */
.sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    /* Keep table action button groups horizontal but with smaller buttons */
    .btn-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
    }
    
    .btn-group .btn {
        flex: 1;
        min-width: 32px !important;
        padding: 0.25rem 0.375rem !important;
        margin-bottom: 0;
        border-radius: 0.25rem !important;
    }
    
    .btn-group .btn i {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Mobile document viewer adjustments */
    .document-viewer iframe,
    .document-viewer video {
        height: 500px !important;
    }
    
    .document-viewer img {
        max-height: 500px !important;
    }
    
    /* Mobile rotation controls */
    .card-header .btn-group {
        flex-direction: row;
    }
    
    .card-header .btn-group .btn {
        margin-bottom: 0;
        margin-left: 0.25rem;
    }
    
    /* Sticky header adjustments for mobile */
    .card-header.sticky-top {
        padding: 0.5rem 1rem;
    }
    
    .card-header.sticky-top h5 {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    /* Extra small screens */
    .document-viewer iframe,
    .document-viewer video {
        height: 400px !important;
    }
    
    .document-viewer img {
        max-height: 400px !important;
    }
    
    /* Compact header for very small screens */
    .card-header.sticky-top {
        padding: 0.375rem 0.75rem;
    }
    
    .card-header.sticky-top .btn-sm {
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
    }
}