/**
 * Base Styles - Common across all layouts
 * These styles are shared by all display templates
 */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent scrollbars on kiosk displays */
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* System font stack for better performance */
body {
    font-family: 
        -apple-system, 
        BlinkMacSystemFont, 
        "Segoe UI", 
        Roboto,
        Oxygen, 
        Ubuntu, 
        Cantarell, 
        "Helvetica Neue",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Required for ShowcaseRotator - DO NOT OVERRIDE */
.item-container {
    width: 100vw;
    height: 100vh;
    /* Display is handled inline by server to prevent flash */
}

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

.visible {
    display: block !important;
}

.flex {
    display: flex !important;
}

/* Image defaults */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent text selection on kiosk */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Disable touch highlights */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Loading states */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

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

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}