/* styles.css - Main Queue Display Styles */
:root {
    --health-color: #3EBE53; 
    --documents-color: #FFD966; 
    --info-color: #87CEEB; 
    --main-bg: #EFF6FF; 
    --header-bg: #1E3A8A; 
    --text-light: #FFFFFF;
}

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--main-bg); 
}

.fullscreen-container { 
    height: 100vh; 
    width: 100vw; 
    display: flex; 
    flex-direction: column; 
}

.header { 
    background-color: var(--header-bg); 
    color: var(--text-light); 
    padding: 0.5vh 1vw; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 8vh; 
}

.logo-container { 
    display: flex; 
    align-items: center; 
    gap: 0.5vw; 
}

.right-logos { 
    display: flex; 
    align-items: center; 
    gap: 0; 
}

.logo { 
    padding: 0.2vh; 
    margin-left: -0.5vw; 
}

.logo img { 
    height: 7vh; 
    width: auto; 
    max-width: 10vw; 
    object-fit: contain; 
}

.main-title { 
    text-align: center; 
    font-size: 3vh; 
    font-weight: 700; 
    color: #fff; 
    margin: 0; 
    padding: 1vh 0; 
    height: 5vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 30%; 
    margin: 0 auto; 
    cursor: pointer; 
}

.main-title a { 
    color: #fff; 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
}

.main-title:hover { 
    opacity: 0.9; 
}

.info-bar { 
    display: flex; 
    background-color: #F1F5F9; 
    padding: 0 1vw; 
    margin: 0.5vh 1vw; 
    border-radius: 4px; 
    height: 4vh; 
    align-items: center; 
}

.left-info { 
    display: flex; 
    align-items: center; 
    flex: 1; 
}

.office-name { 
    font-size: 2vh; 
    font-weight: 600; 
    color: #1E293B; 
    white-space: nowrap; 
    margin-right: 1vw; 
}

.wifi-section { 
    display: flex; 
    align-items: center; 
    font-size: 1.8vh; 
}

.wifi-label { 
    display: flex; 
    align-items: center; 
    font-weight: 600; 
    white-space: nowrap; 
    margin-right: 0.2vw; 
}

.wifi-value { 
    font-weight: 500; 
    white-space: nowrap; 
    margin-right: 1vw; 
}

.date-time { 
    display: flex; 
    align-items: center; 
    gap: 1vw; 
    margin-left: auto; 
}

#current-time { 
    font-size: 2vh; 
    font-weight: 600; 
    color: #1E293B; 
    white-space: nowrap; 
}

.date { 
    font-size: 2vh; 
    font-weight: 600; 
    color: #1E293B; 
    white-space: nowrap; 
}

.control-btn { 
    cursor: pointer; 
    font-size: 2vh; 
    padding: 0.5vh; 
    transition: all 0.3s ease; 
    position: relative; 
}

.control-btn:hover { 
    color: #FFD966; 
    transform: scale(1.1); 
}

.content-area { 
    display: flex; 
    height: 63vh; 
    padding: 0 1vw; 
}

.services-column { 
    width: 30%; 
    padding-right: 1vw; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.service-card { 
    flex: 1; 
    border-radius: 8px; 
    margin: 0.5vh 0; 
    padding: 1vh 1vw; 
    text-align: center; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.health-service { 
    background-color: var(--health-color); 
    color: white; 
}

.documents-service { 
    background-color: var(--documents-color); 
}

.info-service { 
    background-color: var(--info-color); 
}

.service-title { 
    font-size: 2vh; 
    font-weight: 600; 
    margin-bottom: 1vh; 
    text-transform: uppercase; 
}

.queue-number { 
    font-size: 5vh; 
    font-weight: 700; 
    padding: 1vh 0; 
}

.queue-time { 
    font-size: 2.5vh; 
    font-weight: 500; 
}

.video-column { 
    width: 70%; 
    padding-left: 1vw; 
}

.video-container { 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    height: 100%; 
    width: 100%; 
    background-color: #000; 
}

.video-container iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
}

.footer { 
    height: 19vh; 
    background-color: #F1F5F9; 
    padding: 1vh 1vw; 
    margin: 0.5vh 1vw; 
    border-radius: 4px; 
    display: flex; 
    flex-direction: column; 
}

.piket-title { 
    font-size: 1.8vh; 
    font-weight: 600; 
    color: #1E293B; 
    margin-bottom: 1vh; 
    text-align: center; 
}

.staff-grid { 
    display: flex; 
    height: 12vh; 
    gap: 1vw; 
}

.staff-column { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

.staff-box { 
    flex: 1; 
    background-color: white; 
    border-radius: 4px; 
    padding: 0.5vh 0.5vw; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    margin-bottom: 0.5vh; 
}

.staff-title { 
    font-size: 1.6vh; 
    font-weight: 700; 
    color: #1E293B; 
    margin-bottom: 0.5vh; 
    text-align: center; 
    text-transform: uppercase; 
}

.staff-list { 
    display: flex; 
    flex-wrap: wrap; 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    height: calc(100% - 2.5vh); 
    overflow: hidden; 
}

.staff-item { 
    padding: 0.1vh 0; 
    font-size: 1.5vh; 
    font-weight: 600; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

@keyframes highlight { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); background-color: rgba(255, 255, 255, 0.3); } 
    100% { transform: scale(1); } 
}

.highlight { 
    animation: highlight 1s ease; 
}

.small-column { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5vh; 
}

.small-box { 
    flex: 1; 
    background-color: white; 
    border-radius: 4px; 
    padding: 0.5vh 0.5vw; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
}

/* MOBILE RESPONSIVE STYLES */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto;
    }
    
    .fullscreen-container {
        height: auto;
        min-height: 100vh;
    }
    
    .header {
        height: auto;
        min-height: 15vh;
        flex-direction: column;
        gap: 1vh;
        padding: 2vh 4vw;
        justify-content: center;
    }
    
    .logo-container {
        justify-content: center;
        gap: 2vw;
        order: 1;
    }
    
    .main-title {
        font-size: 3vh;
        width: 100%;
        margin: 0;
        order: 2;
        padding: 1vh 0;
    }
    
    .right-logos {
        justify-content: center;
        gap: 2vw;
        order: 3;
    }
    
    .logo img {
        height: 5vh;
        max-width: 20vw;
    }
    
    .info-bar {
        flex-direction: column;
        height: auto;
        padding: 2vh 4vw;
        gap: 1vh;
        margin: 1vh 4vw;
    }
    
    .left-info {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 1vh;
        text-align: center;
    }
    
    .office-name {
        font-size: 2.5vh;
        margin-right: 0;
    }
    
    .wifi-section {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1vh 2vw;
        justify-content: center;
        text-align: center;
    }
    
    .wifi-label, .wifi-value {
        font-size: 2vh;
    }
    
    .date-time {
        flex-direction: row;
        justify-content: center;
        margin-left: 0;
        gap: 2vw;
        flex-wrap: wrap;
    }
    
    #current-time, .date {
        font-size: 2.2vh;
    }
    
    .control-btn {
        font-size: 2.5vh;
        padding: 1vh;
    }
    
    .content-area {
        flex-direction: column;
        height: auto;
        padding: 0 4vw;
        gap: 2vh;
    }
    
    .services-column {
        width: 100%;
        padding-right: 0;
        margin-bottom: 0;
    }
    
    .service-card {
        margin: 1vh 0;
        padding: 3vh 4vw;
        border-radius: 12px;
    }
    
    .service-title {
        font-size: 2.8vh;
        margin-bottom: 2vh;
    }
    
    .queue-number {
        font-size: 8vh;
        padding: 2vh 0;
    }
    
    .queue-time {
        font-size: 3.5vh;
    }
    
    .video-column {
        width: 100%;
        padding-left: 0;
        height: 35vh;
    }
    
    .video-container {
        border-radius: 12px;
    }
    
    .footer {
        height: auto;
        padding: 3vh 4vw;
        margin: 2vh 4vw;
        border-radius: 12px;
    }
    
    .piket-title {
        font-size: 2.5vh;
        margin-bottom: 2vh;
    }
    
    .staff-grid {
        flex-direction: column;
        height: auto;
        gap: 2vh;
    }
    
    .staff-box {
        margin-bottom: 0;
        padding: 2vh 3vw;
        border-radius: 8px;
    }
    
    .staff-title {
        font-size: 2.2vh;
        margin-bottom: 1.5vh;
    }
    
    .staff-list {
        height: auto;
    }
    
    .staff-item {
        font-size: 2vh;
        padding: 0.8vh 0;
        line-height: 1.4;
    }
    
    .small-column {
        flex-direction: column;
        gap: 2vh;
    }
    
    .small-box {
        flex: none;
        padding: 2vh 3vw;
    }
}

@media (max-width: 480px) {
    .header {
        min-height: 18vh;
        padding: 2.5vh 5vw;
    }
    
    .logo img {
        height: 4vh;
        max-width: 25vw;
    }
    
    .main-title {
        font-size: 2.5vh;
    }
    
    .info-bar {
        padding: 2.5vh 5vw;
        margin: 1vh 5vw;
    }
    
    .office-name {
        font-size: 2.2vh;
    }
    
    .wifi-label, .wifi-value {
        font-size: 1.8vh;
    }
    
    #current-time, .date {
        font-size: 2vh;
    }
    
    .control-btn {
        font-size: 2.2vh;
    }
    
    .content-area {
        padding: 0 5vw;
    }
    
    .service-card {
        padding: 3.5vh 5vw;
    }
    
    .service-title {
        font-size: 2.5vh;
    }
    
    .queue-number {
        font-size: 7vh;
    }
    
    .queue-time {
        font-size: 3.2vh;
    }
    
    .video-column {
        height: 30vh;
    }
    
    .footer {
        padding: 3.5vh 5vw;
        margin: 2vh 5vw;
    }
    
    .piket-title {
        font-size: 2.2vh;
    }
    
    .staff-title {
        font-size: 2vh;
    }
    
    .staff-item {
        font-size: 1.8vh;
    }
}

@media (max-width: 375px) {
    .header {
        min-height: 20vh;
        padding: 3vh 6vw;
    }
    
    .logo img {
        height: 3.5vh;
    }
    
    .main-title {
        font-size: 2.2vh;
    }
    
    .info-bar {
        padding: 3vh 6vw;
    }
    
    .wifi-section {
        grid-template-columns: 1fr;
        gap: 0.5vh;
    }
    
    .content-area {
        padding: 0 6vw;
    }
    
    .service-card {
        padding: 4vh 6vw;
    }
    
    .queue-number {
        font-size: 6.5vh;
    }
    
    .video-column {
        height: 25vh;
    }
    
    .footer {
        padding: 4vh 6vw;
    }
    
    .small-column {
        flex-direction: column;
    }
}