/* WSD QUEUE FRONTEND STYLES (Faster Pulse & Admin Fix)
   Path: /assets/public/css/wsd-frontend.css
*/

/* 1. CONTAINER UTAMA */
#wsd-queue-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f0f0f1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 2. LAYOUT ADMIN (FIXED) */
.wp-admin #wsd-queue-wrapper {
    position: fixed !important; top: 32px !important; left: 160px !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; z-index: 90; padding: 15px; background: #f0f0f1; margin: 0 !important;
}
@media (max-width: 960px) { .wp-admin #wsd-queue-wrapper { left: 36px !important; } }
@media (max-width: 782px) { .wp-admin #wsd-queue-wrapper { top: 46px !important; left: 0 !important; } }

/* 3. LAYOUT FRONTEND (FULLSCREEN) */
body:not(.wp-admin) #wsd-queue-wrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; padding: 20px;
}

/* 4. HEADER */
.wsd-q-header {
    background: #fff; padding: 15px 30px; border-radius: 4px; margin-bottom: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-align: center; flex-shrink: 0; 
    display: flex; justify-content: center; align-items: center;
}
.wsd-q-title {
    font-size: 32px; font-weight: 800; text-transform: uppercase; color: #222; margin: 0; letter-spacing: 1px;
}

/* 5. BODY GRID */
.wsd-q-body {
    display: grid; gap: 15px; flex-grow: 1; align-items: start; height: 100%; overflow: hidden; min-height: 0;
}

/* 6. KOLOM */
.wsd-q-col {
    background: #fff; border-radius: 4px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; flex-direction: column; height: 100%; border-top: 5px solid transparent; 
}
.wsd-q-col-header { padding: 12px; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; flex-shrink: 0; }
.wsd-q-col-content { padding: 10px; flex-grow: 1; background: #fafafa; overflow-y: auto; overflow-x: hidden; padding-bottom: 40px; }

/* 7. LIST & GRID */
.wsd-q-list { display: grid; gap: 15px; align-content: start; width: 100%; padding: 5px; }
.wsd-grid-1 { grid-template-columns: 1fr; }
.wsd-grid-2 { grid-template-columns: 1fr 1fr; }
.wsd-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* 8. KARTU PESANAN */
.wsd-q-card {
    padding: 15px 10px; border-radius: 6px; text-align: center;
    box-shadow: 0 2px 3px rgba(0,0,0,0.08); animation: fadeIn 0.3s ease;
    background: #fff; min-width: 0; word-wrap: break-word;
    border: 3px solid transparent; 
    
    /* Transform Fix agar animasi jalan di Admin */
    transform: translateZ(0); 
    backface-visibility: hidden;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.wsd-q-num { font-size: 24px; font-weight: 800; line-height: 1.1; margin-bottom: 2px; white-space: nowrap; color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wsd-q-name { font-size: 14px; font-weight: 600; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; max-width: 100%; }

/* --- ANIMASI BERDENYUT CEPAT (FAST PULSE) --- */
@keyframes fastPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); background-color: #fff; }
    50% { transform: scale(1.08); box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.5); background-color: #fffae6; z-index: 99; }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); background-color: #fff; }
}

/* Class Highlight */
.wsd-pulse {
    /* Gunakan !important untuk memaksa animasi berjalan di Admin */
    animation: fastPulse 0.5s infinite ease-in-out !important; 
    border: 3px solid #ffc107 !important; 
    position: relative;
    z-index: 10;
}

/* SCROLLBAR */
.wsd-q-col-content::-webkit-scrollbar { width: 6px; }
.wsd-q-col-content::-webkit-scrollbar-thumb { background: #c3c4c7; border-radius: 3px; }
.wsd-q-col-content::-webkit-scrollbar-track { background: transparent; }

/* MOBILE */
@media (max-width: 768px) {
    #wsd-queue-wrapper { position: relative; height: auto; z-index: 1; padding: 10px; width: 100%; top:0; left:0; }
    .wsd-q-body { grid-template-columns: 1fr !important; height: auto; overflow: visible; }
    .wsd-q-col { min-height: 300px; margin-bottom: 20px; }
}