:root {
    --color-orange: #FF8C00;      /* Primary: Servisdesk Orange */
    --color-violet: #5E17EB;      /* Secondary: Digital Purple */
    --color-dark-bg: #121212;      /* Dark Background */
    --color-panel-bg: #1A1A1A;      /* Panel/Card Background */
    --color-text: #E0E0E0;        /* Light Text */
}

body {
    margin: 0;
    background: var(--color-dark-bg);
    color: var(--color-text);
    font-family: "Poppins", sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 1. TOP HEADER SECTION (Logo + Status Counters) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 12vh; /* Use Viewport Height */
    background: var(--color-panel-bg);
    border-bottom: 0.46vh solid var(--color-orange); /* 5px / 1080 */
    padding: 0 1.85vh; /* 20px / 1080 */
}
.header-logo {
    height: 20%;
    display: flex;
    align-items: center;
    gap: 1.85vh; /* 20px / 1080 */
}

.header-title {
    font-size: 4.5vh; /* Increased for signage */
    font-weight: 700;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 0.09vh; /* 1px / 1080 */
}

.header-logo img {
    height: 80%;
    object-fit: contain;
}
.status-counters {
    display: flex;
    gap: 2.77vh; /* 30px / 1080 */
}
.counter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.46vh 1.38vh; /* 5px 15px / 1080 */
    border-radius: 0.74vh; /* 8px / 1080 */
    background: var(--color-violet); 
}
.counter-box h3 { 
    margin: 0; 
    font-size: 1.77vh; /* 19.2px (1.2rem) / 1080 */
    color: var(--color-text);
    font-weight: 600;
}
.counter-box h1 { 
    margin: -0.46vh 0 0; /* -5px / 1080 */
    font-size: 3.7vh; /* 40px (2.5rem) / 1080 */
    color: var(--color-orange); 
    font-weight: 800;
}

/* 2. MAIN GRID (Video + Banner/Employees) */
.main-grid {
    display: grid;
    grid-template-columns: 65% 35%;
    flex: 1;
    overflow: hidden;
}

/* LEFT SIDE: VIDEO */
.video-section {
    padding: 1.38vh; /* 15px / 1080 */
    display: flex;
    flex-direction: column;
}
#video-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    border: 0.46vh solid var(--color-violet); /* 5px / 1080 */
    border-radius: 1.38vh; /* 15px / 1080 */
    overflow: hidden;
    background: #000;
}
#player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#unmuteButton {
    position: absolute; 
    bottom: 0.92vh; /* 10px / 1080 */
    left: 0.92vh; /* 10px / 1080 */
    background: rgba(0,0,0,0.7);
    color: #fff; 
    border: 0.09vh solid var(--color-orange); /* 1px / 1080 */
    padding: 0.74vh 1.29vh; /* 8px 14px / 1080 */
    border-radius: 2.31vh; /* 25px / 1080 */
    font-size: 1.6vh; /* Increased for signage */
    cursor: pointer;
    z-index: 5;
    opacity: 0; /* <-- MODIFIED: Hide by default */
    transition: opacity 0.3s ease; /* <-- MODIFIED: Add smooth fade */
}

/* --- NEW RULE ADDED --- */
#video-wrapper:hover #unmuteButton {
    opacity: 1; /* <-- Show on hover */
}

/* RIGHT SIDE: EMPLOYEE & BANNER */
.right-section {
    display: flex;
    flex-direction: column;
    background: var(--color-panel-bg);
    border-left: 0.46vh solid var(--color-violet); /* 5px / 1080 */
    padding: 1.38vh; /* 15px / 1080 */
}
.employee-duty-area {
    margin-bottom: 1.85vh; /* 20px / 1080 */
}
.employee-duty-area h2 {
    color: var(--color-orange);
    border-bottom: 0.18vh solid var(--color-violet); /* 2px / 1080 */
    padding-bottom: 0.46vh; /* 5px / 1080 */
    margin-top: 0;
    font-size: 2.22vh; /* 24px (1.5rem) / 1080 */
}
.employee-cards-container {
    display: flex;
    gap: 1.38vh; /* 15px / 1080 */
    justify-content: space-around;
}
.employee-card {
    width: 48%;
    height: 23.15vh; /* 250px / 1080 */
    border-radius: 0.92vh; /* 10px / 1080 */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.37vh 0.92vh rgba(0,0,0,0.5); /* 4px 10px / 1080 */
    border: 0.18vh solid var(--color-orange); /* 2px / 1080 */
}
.employee-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    padding: 2.77vh 0.92vh 0.92vh; /* 30px 10px 10px / 1080 */
    box-sizing: border-box;
}
.employee-card p {
    margin: 0;
    font-weight: 700;
    font-size: 1.63vh; /* 17.6px (1.1rem) / 1080 */
    color: #fff;
    text-shadow: 0.09vh 0.09vh 0.18vh #000; /* 1px 1px 2px / 1080 */
}
.employee-card small {
    display: block;
    font-size: 1.33vh; /* 14.4px (0.9rem) / 1080 */
    color: var(--color-orange);
    font-weight: 600;
}

/* This is the NO DUTY card style */
.employee-card[style*="width: 100%"] {
    height: 23.15vh; /* 250px / 1080 */
    border-radius: 0.92vh; /* 10px / 1080 */
}
.employee-card[style*="width: 100%"] p {
    font-size: 1.92vh; /* 20.8px (1.3rem) / 1080 */
}

.banner {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    border: 0.27vh solid var(--color-violet); /* 3px / 1080 */
    border-radius: 0.92vh; /* 10px / 1080 */
}
.banner img {
    width: 100%; height: 100%; object-fit: fill; position: absolute;
    top: 0; left: 0; opacity: 0; transition: opacity 1.5s ease-in-out;
}
.banner img.active { opacity: 1; }
/* Toggle banner button removed; rule no longer needed. */

/* 3. ANNOUNCEMENT BAR */
.announcement-bar {
    display: flex;
    flex-wrap: wrap; /* Allow text to wrap to new lines */
    align-items: flex-start; /* Top align when multiple lines */
    background: var(--color-orange); 
    color: var(--color-dark-bg);
    font-weight: 700;
    min-height: 8vh; /* Preserve original minimum height */
    height: auto; /* Grow if text needs more space */
    padding: 0.74vh 1.85vh 0.74vh; /* Add vertical padding */
    overflow: visible; /* Ensure wrapped lines are visible */
    border-top: 0.46vh solid var(--color-violet); /* 5px / 1080 */
    box-sizing: border-box;
}
.announcement-bar img {
    width: 8vh; 
    height: 4vh; 
   
    margin-right: 3vh;
}
.announcement-bar p {
    margin: 0;
    font-size: 3vh; /* Increased for signage */
    transition: opacity 0.5s ease; /* <-- MODIFIED: Added for fade */
    flex: 1 1 100%; /* Take full width under icon */
    white-space: normal; /* Allow wrapping */
    word-break: break-word; /* Break long words */
    line-height: 1.2; /* Tight but readable */
}

/* 4. FOOTER (MARQUEE ADDED) */
footer {
    position: relative;
    background: var(--color-panel-bg);
    color: #fff;
    height: 8vh;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.46vh solid var(--color-orange); /* 5px / 1080 */
}

/* Clock/Date fixed positioning */
#dateBox, #clock {
    position: absolute;
    top: 0;
    width: 15%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.63vh; /* 17.6px (1.1rem) / 1080 */
    z-index: 2; 
    background: var(--color-panel-bg);
    color: var(--color-text);
}
#dateBox { left: 0; border-right: 0.18vh solid var(--color-violet); font-size: 2.8vh; text-align: center; } 
#clock { right: 0; border-left: 0.18vh solid var(--color-violet); color: var(--color-orange); font-size: 3.5vh;} /* Increased for signage */

/* Marquee Text Styling and Animation */
footer p.marquee {
    position: absolute; 
    white-space: nowrap; 
    will-change: transform; 
    animation: marquee 30s linear infinite; 
    font-size: 3vh; /* Increased for signage */
    margin: 0;
    padding: 0 0.92vh; /* 10px / 1080 */
}

/* KEYFRAMES for the Marquee Effect */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Fallback for the "No Duty" and "No Banner" text */
.banner p[style*="text-align:center"] {
    font-size: 1.5vh;
    padding: 1.85vh; /* 20px / 1080 */
}