/* css/style.css (Updated for Notifications and Layout) */

/* Import the foundational styles for the application */
@import url('design-system.css');
@import url('mobile.css');
@import url('modals.css');

/* --- Main Application Body Styles --- */
body {
    background: var(--bg-color);
    background-attachment: fixed;
}

/* --- Connection Status --- */
.connection-error {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background-color: var(--error-500);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: var(--text-sm);
    z-index: 1000;
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.3s ease;
}

/* --- Notification System --- */
/* Notification styles are now handled by notifications.css (unified top-center system) */

/* --- Utility Classes --- */
.hidden { display: none !important; }

/* --- Keyframes --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Hide Scrollbars Globally (Maintain Functionality) --- */
/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}