/**
 * Page Overrides - Extracted Inline Styles for CSP Compliance
 * This file contains all styles that were previously inline in HTML files
 */

/* ============================================
   INDEX.PHP & LOGIN PAGE STYLES
   ============================================ */

/* Body overflow for login page */
body.logged-out {
    overflow: hidden;
}

/* Login page main content wrapper */
.main-content-wrapper {
    display: flex;
}

/* Login container positioning */
.loginContainer {
    margin-top: 250px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

/* Login page right section */
.main-content-wrapper-right {
    width: calc(100vw);
    display: flex;
    flex-direction: row-reverse;
}

/* Loader spinner styling (dynamically inserted) */
.login-loader-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/public/images/loader.svg) no-repeat center;
    background-size: 20px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

/* ============================================
   HEADER STYLES
   ============================================ */

/* Notification container positioning */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 420px;
}

/* Login header - IBM logo filter */
.topbar-left img[src*="icon-ibm-logo-white.svg"] {
    filter: brightness(0) saturate(100%);
    width: 50px;
}

/* Login header - hide app meta */
.topbar-left .app-meta {
    display: none;
}

/* ============================================
   404 PAGE STYLES
   ============================================ */

/* 404 page body styles */
body.page-404 {
    overflow: hidden;
    background: radial-gradient(100vh at 20% 50%, #ffffff, #1f66f705);
}

/* 404 page Lottie container (if needed in future) */
#lottie {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}

/* 404 page main column - conditional margin */
body.page-404.logged-out .main-column {
    margin-left: 0;
}

/* 404 content wrapper */
.content-404-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
}

/* 404 animation container */
.animation-404-container {
    width: 500px;
    height: 500px;
    margin-bottom: 20px;
}

/* 404 text container */
.text-404-container {
    text-align: center;
    max-width: 600px;
}

/* 404 heading */
.heading-404 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: #161616;
}

/* 404 message */
.message-404 {
    font-size: 1.125rem;
    color: #525252;
    line-height: 1.6;
}

/* ============================================
   RESPONSIVE & UTILITY STYLES
   ============================================ */

/* Ensure main column has proper margin for logged-in users */
body.logged-in .main-column {
    /*margin-left: 240px;*/ /* sidebar width */
}

/* Override for logged-out users */
body.logged-out .main-column {
    margin-left: 0;
}

/* Hide elements with display:none utility class */
.hide-display {
    display: none !important;
}

/* Show elements */
.show-display {
    display: block !important;
}

/* Made with Bob */


/* ============================================
   HEADER STYLES
   ============================================ */

/* Notification container positioning */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 420px;
}

/* Header login - IBM logo filter */
.topbar-left img[src*="icon-ibm-logo-white.svg"] {
    filter: brightness(0) saturate(100%);
    width: 50px;
}

/* Header login - hide app meta */
.topbar.login-header .app-meta {
    display: none;
}


/* Hide session data container */
#session-data {
    display: none;
}


/* Fade out animation for page transitions */
body.fade-out {
    opacity: 0;
    transition: opacity 350ms ease-in-out;
}

/* Overlay and fullscreen image display */
#overlay.show,
#fullScreenImgContainer.show {
    display: inherit !important;
}

#fullScreenImgContainer.show {
    display: flex !important;
}

#overlay,
#fullScreenImgContainer {
    display: none;
}


/* 404 Page Styles */
body.page-404 {
    overflow: hidden;
    background: radial-gradient(100vh at 20% 50%, #ffffff, #1f66f705);
}

.main-column.no-sidebar {
    margin-left: 0;
}

#lottie {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}

.error-404-container {
    display: flex;
}

.error-404-content {
    margin-top: 250px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.error-404-title {
    font-size: 2rem;
    color: #1F66F7;
    margin-left: 50px;
}

.error-404-message {
    font-size: 1rem;
    color: #1F66F7;
    margin-left: 50px;
    margin-top: 25px;
}

.error-404-animation {
    width: calc(100vw);
    display: flex;
    flex-direction: row-reverse;
}