html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, #dashboard, #kpi-display {
    flex: 1 0 auto; /* Don't shrink, do grow, and size based on content */
}

footer {
    flex-shrink: 0; /* Don't shrink footer */
    margin-top: auto; /* Push to bottom */
}

.footer-content {
    margin-top: auto;
}

.thumbnail-container {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #1e293b;
    border-radius: 0.375rem;
}
.thumbnail-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.thumbnail-slide.active {
    opacity: 1;
}

.kpi-slide {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    object-fit: contain;
    transition: opacity 1s ease-in-out;
}
.kpi-slide.active {
    opacity: 1;
    display: block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Footer positioning */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, #dashboard, #kpi-display {
    flex: 1 0 auto; /* Don't shrink, do grow, and size based on content */
}

footer {
    flex-shrink: 0; /* Don't shrink footer */
    margin-top: auto; /* Push to bottom */
}

.footer-content {
    margin-top: auto;
}

/* Fullscreen styles */
:fullscreen #image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fullscreen mode - ONLY time visible */
:fullscreen #kpi-display {
    background: #0f172a;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}
:fullscreen .image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}
:fullscreen #current-time {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 3rem;
    z-index: 100;
}
:fullscreen header,
:fullscreen footer,
:fullscreen .header-content,
:fullscreen .footer-content,
:fullscreen #fullscreen-btn {
    display: none !important;
}