/* =====================================
   TRAKIVENT Event Control Centre
   Version 0.4.5
===================================== */

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

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#f4f6f8;

    color:#222;

}

.container{

    max-width:1400px;

    margin:auto;

    padding:30px;

}

header{

    margin-bottom:30px;

}

header h1{

    color:#0f6b3f;

    font-size:34px;

    margin-bottom:8px;

}

header p{

    color:#666;

}

/* ==========================
Dashboard Cards
========================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:30px;

}

.card{

    background:#fff;

    border-radius:12px;

    padding:25px;

    text-align:center;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.card h3{

    color:#666;

    font-size:15px;

    margin-bottom:12px;

}

.card h2{

    font-size:34px;

    color:#111;

}

/* ==========================
Progress
========================== */

.progressSection{

    margin-bottom:35px;

}

.progressHeader{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-weight:bold;

}

.progressBar{

    width:100%;

    height:16px;

    background:#ddd;

    border-radius:20px;

    overflow:hidden;

}

.progressFill{

    width:0%;

    height:100%;

    background:#18a558;

    transition:.4s;

}

/* ==========================
Main Grid
========================== */

.mainGrid{

    display:grid;

    grid-template-columns:320px 1fr 380px;

    gap:24px;

    align-items:start;

}

.leftPanel,
.middlePanel,
.rightPanel{

    background:#fff;

    padding:25px;

    border-radius:12px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.leftPanel h2,
.rightPanel h2{

    margin-bottom:20px;

    color:#0f6b3f;

}

/* ==========================
Feed
========================== */

.feedItem{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #eee;

}

.feedGuest{

    font-weight:bold;

}

.feedCategory{

    color:#777;

    font-size:14px;

}

.feedTime{

    color:#666;

    font-size:14px;

}

.emptyFeed{

    color:#888;

    text-align:center;

    padding:30px;

}

/* ==========================
Search
========================== */

#searchBox{

    width:100%;

    padding:14px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    margin-bottom:25px;

}

#searchBox:focus{

    outline:none;

    border-color:#0f6b3f;

    box-shadow:0 0 0 3px rgba(15,107,63,.15);

}

.searchResult{

    min-height:260px;

}

.emptySearch{

    text-align:center;

    color:#888;

    margin-top:70px;

}

/* Guest Card */

.searchCard{

    border:1px solid #e7e7e7;

    border-radius:14px;

    padding:22px;

    background:#fafafa;

}

.guestHeader{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

}

.guestAvatar{

    width:68px;

    height:68px;

    border-radius:50%;

    background:linear-gradient(135deg,#0f6b3f,#18a558);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:bold;

    box-shadow:0 6px 14px rgba(0,0,0,.15);

}

.guestIdentity h3{

    margin-bottom:8px;

    color:#222;

}

/* ==========================
Ticket Badges
========================== */

.ticketBadge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 14px;

    border-radius:25px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:white;

}

.ticket-vip{

    background:linear-gradient(135deg,#18a558,#0f6b3f);

}

.ticket-regular{

    background:linear-gradient(135deg,#1976d2,#0d47a1);

}

.ticket-staff{

    background:linear-gradient(135deg,#8e24aa,#5e35b1);

}

.ticket-vendor{

    background:linear-gradient(135deg,#ef6c00,#e65100);

}

.guestInfo{

    display:grid;

    gap:14px;

    margin-bottom:24px;

}

.infoRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:10px;

    border-bottom:1px solid #ececec;

}

.label{

    color:#777;

    font-weight:bold;

}

.statusChecked{

    color:#18a558;

    font-weight:bold;

}

.statusPending{

    color:#d32f2f;

    font-weight:bold;

}

.guestActions{

    margin-top:18px;

}

.checkinBtn,
.undoBtn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.checkinBtn{

    background:#18a558;

    color:white;

}

.checkinBtn:hover{

    transform:translateY(-2px);

    background:#14854a;

}

.undoBtn{

    background:#ef6c00;

    color:white;

}

.undoBtn:hover{

    transform:translateY(-2px);

    background:#d85d00;

}/* =====================================
Responsive Layout
===================================== */

@media (max-width: 768px){

    .mainGrid{

        grid-template-columns:1fr;

    }

}
/* ==========================
Guest List
========================== */

.guestItem{

    padding:14px;

    border-bottom:1px solid #eee;

    cursor:pointer;

    transition:.2s;

}

.guestItem:hover{

    background:#f7faf9;

}

.guestName{

    font-size:16px;

    font-weight:700;

    color:#222;

    margin-bottom:4px;

}

.guestTicket{

    font-size:13px;

    opacity:.85;

    letter-spacing:.4px;

}

/* ==========================
Active Guest
========================== */

.activeGuest{

    background:#eaf8f0;

    border-left:6px solid #18a558;

    transform:translateX(4px);

}

.activeGuest .guestName{

    color:#0f6b3f;

}

/* ==========================
Guest List Row
========================== */

.guestRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.guestStatusIn{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#18a558;

}

.guestStatusOut{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#d9534f;

}

/* ==========================
Guest Group Headers
========================== */

.groupHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    margin-top:18px;

    margin-bottom:8px;

    border-radius:10px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

    color:#fff;

}
.group-vip{

    background:#18a558;

}

.group-regular{

    background:#1976d2;

}

.group-staff{

    background:#8e44ad;

}

.group-vendor{

    background:#f57c00;

}

/* ==========================
Ticket Colours
========================== */

.ticket-vip{

    color:#18a558;

    font-weight:bold;

}

.ticket-regular{

    color:#1976d2;

    font-weight:bold;

}

.ticket-staff{

    color:#8e44ad;

    font-weight:bold;

}

.ticket-vendor{

    color:#f57c00;

    font-weight:bold;

}

/* ==========================
Guest Items
========================== */

.guestItem{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    padding:14px 16px;

    margin-bottom:10px;

    cursor:pointer;

    transition:all .25s ease;

}

.guestItem:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.10);

    border-color:#18a558;

}

.activeGuest{

    background:#eefaf3;

    border:2px solid #18a558;

    box-shadow:0 8px 18px rgba(24,165,88,.20);

}

/* =====================================
Premium Guest Details Card
===================================== */

.profileHeader{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:24px;

}

.profileAvatar{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#0f6b3f;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:bold;

    flex-shrink:0;

}

.profileIdentity h2{

    margin:0;

    font-size:26px;

    color:#222;

}

.profileBody{

    margin-top:20px;

}

.infoRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #ececec;

}

.label{

    font-weight:600;

    color:#666;

}

.profileActions{

    margin-top:28px;

}


.checkinBtn,
.undoBtn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.checkinBtn{

    background:#18a558;

    color:#fff;

}

.checkinBtn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(24,165,88,.25);

}

.undoBtn{

    background:#f57c00;

    color:#fff;

}

.undoBtn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(245,124,0,.25);

}

.ticketBadge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    color:#fff;

    font-size:13px;

    font-weight:bold;

    margin-top:8px;

}

.ticket-vip{

    background:#18a558;

}

.ticket-regular{

    background:#1976d2;

}

.ticket-staff{

    background:#8e44ad;

}

.ticket-vendor{

    background:#f57c00;

}

/* =====================================
Guest Filters
===================================== */

.guestFilters{

    display:flex;

    gap:10px;

    margin-bottom:20px;

}

.filterBtn{

    flex:1;

    padding:10px 14px;

    border:none;

    border-radius:8px;

    background:#ececec;

    color:#555;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.filterBtn:hover{

    background:#d9d9d9;

}

.activeFilter{

    background:#0f6b3f;

    color:#fff;

}

/* ============================
   TRAKIVENT Loading Spinner
============================ */

.spinner{

    width:14px;
    height:14px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

    animation:spin .7s linear infinite;

    vertical-align:middle;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ============================
   TRAKIVENT Success Animation
============================ */

.checkSuccess{

    animation:successFlash .45s ease;

}

@keyframes successFlash{

    0%{

        background:#d4ffd4;

    }

    100%{

        background:white;

    }

}

/* ===========================
   TRAKIVENT Check-in Station
=========================== */

.stationPage{

    background:#f5f6fa;

    font-family:Arial, sans-serif;

}

.stationContainer{

    max-width:700px;

    margin:auto;

    padding:40px;

    text-align:center;

}

#reader{

    width:100%;

    max-width:500px;

    margin:auto;

}

#stationResult{

    margin-top:30px;

    min-height:250px;

}

/* ===================================
   TRAKIVENT Premium Station Card
=================================== */

.stationCard{

    background:white;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    max-width:500px;

    margin:30px auto;

}

.stationAvatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#0b6efd;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:bold;

    margin:auto;

}

.stationName{

    margin:20px 0 10px;

    font-size:30px;

}

.stationBadge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-weight:bold;

    margin-bottom:25px;

}

.ticket-vip{

    background:#FFD700;

    color:#222;

}

.ticket-regular{

    background:#0d6efd;

    color:white;

}

.ticket-staff{

    background:#198754;

    color:white;

}

.ticket-vendor{

    background:#fd7e14;

    color:white;

}

.stationInfo{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-bottom:25px;

}

.stationInfo div{

    background:#f7f7f7;

    padding:15px;

    border-radius:10px;

}

.stationCheckinBtn{

    width:100%;

    padding:18px;

    font-size:20px;

    border:none;

    border-radius:12px;

    background:#198754;

    color:white;

    cursor:pointer;

    transition:.25s;

}

.stationCheckinBtn:hover{

    transform:scale(1.02);

}

/* ================================
   Success Screen
================================ */

.stationSuccess{

    background:#198754;

    color:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

    animation:pop .35s ease;

}

.successIcon{

    font-size:80px;

    font-weight:bold;

    margin-bottom:20px;

}

@keyframes pop{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ===================================
   Already Checked In
=================================== */

.stationAlready{

    background:#ffc107;

    color:#222;

    padding:40px;

    border-radius:20px;

    text-align:center;

    animation:pop .35s ease;

}

.alreadyIcon{

    font-size:70px;

    margin-bottom:15px;

}

/* ===================================
   Invalid QR
=================================== */

.stationInvalid{

    background:#dc3545;

    color:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

    animation:pop .35s ease;

}

.invalidIcon{

    font-size:70px;

    margin-bottom:15px;

}

/* ===================================
   Network Connection Status
=================================== */

#connectionStatus{

    display:inline-block;

    margin:15px auto;

    padding:7px 14px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

}

.connectionOnline{

    background:#d1e7dd;

    color:#0f5132;

}

.connectionOffline{

    background:#f8d7da;

    color:#842029;

}

/* ===================================
   Connection Lost
=================================== */

.stationOffline{

    background:#ffc107;

    color:#222;

    padding:40px;

    border-radius:20px;

    text-align:center;

    animation:pop .35s ease;

}

.offlineIcon{

    font-size:70px;

    margin-bottom:15px;

}

/* ===================================
   Connection Restored
=================================== */

.stationOnline{

    background:#d1e7dd;

    color:#0f5132;

    padding:30px;

    border-radius:20px;

    text-align:center;

    animation:pop .35s ease;

}

.onlineIcon{

    font-size:60px;

    font-weight:bold;

    margin-bottom:10px;

}

/* =====================================
   TRAKIVENT
   Live Station Monitor
   Version 0.5.1
   ===================================== */

.stationMonitorPanel {
    margin-top: 24px;
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}


.stationMonitorHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}


.stationMonitorHeader h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}


.stationMonitorHeader p {
    margin: 5px 0 0;
    color: #777;
    font-size: 14px;
}


.stationMonitorStatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}


.stationMonitorOnline {
    color: #16803c;
}


.stationMonitorStatus.stationMonitorOnline {
    background: #eaf8ef;
    color: #16803c;
}


.stationMonitorError {
    background: #fff0f0;
    color: #c62828;
}


/* =====================================
   Station Grid
   ===================================== */

.stationMonitorGrid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 16px;
}


/* =====================================
   Station Card
   ===================================== */

.stationMonitorCard {
    position: relative;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.stationMonitorCard:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

}


/* =====================================
   Card Header
   ===================================== */

.stationMonitorCardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}


.stationMonitorCardHeader > div {
    display: flex;
    align-items: center;
    gap: 12px;
}


.stationMonitorCardHeader h3 {
    margin: 0;

    font-size: 18px;

    font-weight: 700;
}


/* =====================================
   Station Icon
   ===================================== */

.stationMonitorCardHeader > div::before {

    content: "📱";

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: #eef2ff;

    border-radius: 12px;

    font-size: 20px;

}


/* =====================================
   Active Indicator
   ===================================== */

.stationMonitorCardHeader
.stationMonitorOnline {

    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    border-radius: 20px;

    background: #eaf8ef;

    color: #16803c;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

}


/* =====================================
   Station Statistics
   ===================================== */

.stationMonitorStats {

    display: grid;

    grid-template-columns:
        1fr 1.5fr;

    gap: 12px;

}


.stationMonitorStats > div {

    padding: 14px;

    background: #ffffff;

    border-radius: 10px;

    border: 1px solid #edf0f3;

}


.stationMonitorStats strong {

    display: block;

    margin-bottom: 4px;

    font-size: 20px;

    font-weight: 700;

}


.stationMonitorStats span {

    display: block;

    color: #777;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}


/* =====================================
   Empty State
   ===================================== */

.stationMonitorGrid .emptyFeed {

    padding: 30px;

    text-align: center;

    color: #777;

    background: #f8fafc;

    border-radius: 12px;

}


/* =====================================
   Mobile
   ===================================== */

@media (max-width: 600px) {

    .stationMonitorPanel {

        padding: 18px;

    }


    .stationMonitorHeader {

        align-items: flex-start;

        flex-direction: column;

    }


    .stationMonitorStats {

        grid-template-columns: 1fr;

    }

}

/* =====================================
   Control Centre Header
   ===================================== */

.controlCentreHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}


/* =====================================
   Event Selector
   ===================================== */

.eventSelectorWrapper {

    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 220px;

}


.eventSelectorWrapper label {

    font-size: 13px;

    font-weight: 600;

    color: #666;

}


#eventSelector {

    padding: 10px 12px;

    border: 1px solid #d9d9d9;

    border-radius: 8px;

    background: #fff;

    font-size: 14px;

    cursor: pointer;

}


#eventSelector:focus {

    outline: none;

    border-color: #333;

}


/* =====================================
   Responsive
   ===================================== */

@media (max-width: 700px) {

    .controlCentreHeader {

        flex-direction: column;

        align-items: stretch;

    }


    .eventSelectorWrapper {

        width: 100%;

    }


    #eventSelector {

        width: 100%;

    }

}