/* Apple/System Font Stack */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    background-color: #f8fafc; /* Slate-50 */
    color: #1e293b; /* Slate-800 */
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Utilities */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* --- Fixed Page Routing Visibility --- */
.page { 
    display: none !important; 
}
.page.active { 
    display: block !important; 
    animation: fadeInPage 0.3s ease-in-out forwards;
}

/* --- Fixed Modal Overlay Visibility --- */
.modal-overlay { 
    display: none !important; 
    position: fixed; 
    z-index: 100; /* Increased to ensure it covers the header */
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(15, 23, 42, 0.75); 
    backdrop-filter: blur(4px); 
    justify-content: center; 
    align-items: center; 
}
.modal-overlay.active { 
    display: flex !important; 
    animation: fadeInModal 0.2s ease-out forwards;
}

/* --- Global Loading Overlay --- */
#loading-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.9); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 150; /* Higher than modals */
    backdrop-filter: blur(5px); 
}

/* --- Permissions System --- */
.owner-controls { display: none !important; }
body.is-owner .owner-controls, body.is-admin .owner-controls { display: flex !important; }
.admin-only { display: none !important; }
body.is-admin .admin-only { display: flex !important; }

/* Card Hover Effects */
.comp-card { transition: transform 0.2s, box-shadow 0.2s; }
.comp-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

/* Hero Pattern */
.hero-pattern {
    background-color: #1e293b;
    background-image: radial-gradient(#334155 1px, transparent 1px);
    background-size: 24px 24px;
}

/* --- Keyframe Animations --- */
@keyframes fadeInPage { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes fadeInModal { 
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

.fade-text { animation: textFadeInOut 4s infinite; }

@keyframes textFadeInOut { 
    0%, 100% { opacity: 0; transform: translateY(5px); } 
    10%, 90% { opacity: 1; transform: translateY(0); } 
}

/* News Ticker Animation */
@keyframes ticker-scroll {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
.ticker-wrapper {
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    width: 100%;
    position: relative;
}
.ticker-content {
    display: inline-flex;
    animation: ticker-scroll 35s linear infinite; 
}
.ticker-wrapper:hover .ticker-content {
    animation-play-state: paused;
}