/**
 * Global CSS - Document Tracking System
 * Shared styles across all pages
 */

/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */
:root {
    /* Brand Colors */
    --color-primary-green: #103D1C;
    --color-primary-green-dark: #0a2914;
    --color-primary-green-hover: #14532d;
    --color-accent-red: #dc2626;
    
    /* Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Transitions */
    --transition-default: all 0.3s ease;
    
    /* Shadows */
    --shadow-primary: 0 4px 12px rgba(16, 61, 28, 0.3);
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    /* Z-index */
    --z-index-overlay: 10;
}

/* ========================================
   Font Imports
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========================================
   Base Styles
   ======================================== */
body {
    font-family: var(--font-family-primary);
}

/* ========================================
   Logo Styles
   ======================================== */
.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   Background Image Styles
   ======================================== */
.bg-school-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Note: Background image URL is set per page due to different relative paths */

/* ========================================
   Overlay Gradient
   ======================================== */
.overlay-gradient {
    background: linear-gradient(135deg, rgba(16, 61, 28, 0.85) 0%, rgba(20, 83, 45, 0.75) 100%);
}

/* ========================================
   Brand Colors
   ======================================== */
.bg-header-green {
    background-color: var(--color-primary-green);
}

.bg-header-green-hover:hover {
    background-color: var(--color-primary-green-dark);
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* ========================================
   Utility Classes
   ======================================== */
.fade-in {
    animation: fadeInUp 0.8s ease-out;
}

/* ========================================
   Scrollbar Styling (Hidden by default, show on hover/drag)
   ======================================== */

/* Hide scrollbar for Chrome, Safari and Opera */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Show scrollbar on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    *:hover::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
    }
    
    *:hover::-webkit-scrollbar-thumb:hover {
        background-color: rgba(156, 163, 175, 0.8);
    }
    
    *:hover {
        scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    }
}

/* Show scrollbar while scrolling/dragging (mobile and desktop) */
*:active::-webkit-scrollbar-thumb,
*:focus::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.8);
}

*:active,
*:focus {
    scrollbar-color: rgba(156, 163, 175, 0.8) transparent;
}

/* Force show scrollbar when content overflows on mobile */
@media (max-width: 768px) {
    .overflow-y-auto,
    .overflow-x-auto,
    .overflow-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Show scrollbar indicator on mobile when scrolling */
    .overflow-y-auto:active::-webkit-scrollbar-thumb,
    .overflow-x-auto:active::-webkit-scrollbar-thumb,
    .overflow-auto:active::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.6);
    }
}

/* ========================================
   Mobile Responsive Utilities
   ======================================== */

/* Mobile-first responsive containers */
@media (max-width: 640px) {
    /* Reduce padding on mobile */
    .container-mobile {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Stack elements vertically on mobile */
    .mobile-stack {
        flex-direction: column !important;
    }
    
    /* Full width on mobile */
    .mobile-full {
        width: 100% !important;
    }
    
    /* Hide on mobile */
    .mobile-hide {
        display: none !important;
    }
    
    /* Smaller text on mobile */
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    
    /* Smaller headings on mobile */
    h1.mobile-responsive { font-size: 1.5rem !important; }
    h2.mobile-responsive { font-size: 1.25rem !important; }
    h3.mobile-responsive { font-size: 1.125rem !important; }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .tablet-stack {
        flex-direction: column !important;
    }
}

/* ========================================
   Touch-friendly interactions for mobile
   ======================================== */
@media (max-width: 768px) {
    /* Larger touch targets */
    button, a, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .nav-item {
        padding: 0.875rem 1rem !important;
    }
    
    /* Prevent text selection on buttons during touch */
    button, .btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        user-select: none;
    }
}