/* ==========================================
   GESTTECH MOBILE OVERRIDE
==========================================*/

@media screen and (max-width:768px){

.container{
    width:100%;
    padding:10px;
}
/* ================= TOPBAR ================= */

.topbar{

    flex-direction:column;

    align-items:stretch;

    gap:14px;

    padding:16px;

    border-radius:16px;

}

.brand{

    align-items:center;

    gap:14px;

}

.logo{

    width:48px;

    height:48px;

}

.brand h1{

    font-size:18px;

    line-height:1.2;

}

.brand p{

    font-size:12px;

}

.version{

    font-size:10px;

    padding:4px 8px;

}
.logo{
    width:52px;
    height:52px;
}

.brand h1{
    font-size:20px;
}

.brand p{
    font-size:12px;
}

.version{
    margin-top:6px;
}

.top-action{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.theme-selector{

    width:100%;

}

#themeColor{

    width:100%;

}

.license-status-card{

    width:100%;

    min-width:0;

}
/* ================= UPLOAD ================= */

.upload-grid{

    grid-template-columns:1fr;

    gap:14px;

}

.upload-box{

    padding:16px;

    border-radius:16px;

}

.upload-box label{

    font-size:12px;

}

.upload-box input{

    font-size:13px;

}

.filename{

    font-size:12px;

}
/* ================= BUTTON ================= */

.process-area{

    flex-direction:column;

    gap:10px;

}

.process-area button{

    width:100%;

    height:48px;

    font-size:14px;

    border-radius:12px;

}
/* ================= KPI ================= */

.summary{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.summary-card{
    padding:16px;
}

.summary-card h2{
    font-size:24px;
}

/* ================= VALIDATION ================= */

/* ================= VALIDATION ================= */

.validation-card{

    padding:18px;

    border-radius:18px;

}

.validation-card h2{

    font-size:18px;

    margin-bottom:16px;

}

.validation-table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

.validation-table td{

    padding:12px;

    font-size:13px;

}
/* ================= PERFORMANCE FILTER ================= */

.performance-filter-card{

    padding:18px;

    border-radius:18px;

}

.performance-filter-header{

    flex-direction:column;

    gap:14px;

}

.performance-filter-heading h2{

    font-size:20px;

}

.performance-filter-heading p{

    font-size:13px;

}

.performance-filter-status{

    width:100%;

    text-align:center;

}

.performance-filter-toolbar{

    flex-direction:column;

    gap:16px;

}

.performance-filter-dates{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.performance-filter-field{

    width:100%;

    min-width:0;

}

.performance-date-control{

    width:100%;

}

.performance-filter-actions{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.performance-filter-actions button{

    width:100%;

    height:48px;

}

.performance-filter-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

.performance-filter-info{

    font-size:12px;

}

.performance-filter-hint{

    font-size:12px;

}

/* ================= CONTENT ================= */

.content{
    padding:16px;
}

.content-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

/* ================= TABLE ================= */

.table-wrap{

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    border-radius:16px;

}

#resultTable{

    min-width:100%;

}

#resultTable th{

    font-size:11px;

    padding:10px;

}

#resultTable td{

    padding:10px 8px;

    font-size:12px;

}

#resultTable th:first-child,
#resultTable td:first-child{

    min-width:240px;

}
/* ================= DAILY ================= */

/* ================= DAILY AUDIT ================= */

.daily-audit-card{

    padding:18px;

    border-radius:18px;

}

.daily-audit-header{

    flex-direction:column;

    gap:14px;

}

.daily-audit-title h2{

    font-size:20px;

}

.daily-audit-title p{

    font-size:13px;

}

.daily-audit-controls{

   width:max-content;

    display:flex;

    flex-direction:column;

    gap:10px;

}

#dailyAuditDate{

    width:100%;

    min-width:0;

}

#dailyAuditStatus{

    width:100%;

    text-align:center;

}


/* ================= DAILY KPI ================= */

.daily-performance-cards{

    grid-template-columns:1fr;

    gap:12px;

}

.daily-performance-card{

    padding:16px;

}

.daily-performance-card strong{

    font-size:22px;

}

/* ================= DAILY OVERVIEW ================= */

.daily-validation-overview{

    grid-template-columns:1fr;

    gap:12px;

}

.daily-validation-group{

    padding:16px;

}

.daily-validation-item{

    padding:14px;

}

.daily-audit-empty{

    padding:40px 18px;

    font-size:13px;

}








/* ================= RANKING ================= */

.ranking{

    grid-template-columns:1fr;

    gap:14px;

}

.rank-card{

    padding:18px;

}

.rank-card h3{

    font-size:17px;

    margin-bottom:14px;

}

.rank-item{

    padding:12px;

}

.rank-position{

    width:32px;

    font-size:18px;

}

.rank-staff{

    font-size:13px;

}

.rank-value{

    font-size:13px;

}
/* ================= FOOTER ================= */

.footer{
    flex-direction:column;
    text-align:center;
    gap:10px;
    padding:18px;
}

}

/* ==========================================
   SMALL PHONE
==========================================*/

@media screen and (max-width:480px){

/* ================= SUMMARY ================= */

.summary{

    grid-template-columns:1fr;

    gap:14px;

}

.summary-card{

    padding:18px;

    border-radius:18px;

}

.summary-title{

    font-size:11px;

    margin-bottom:10px;

}

.summary-card h2{

    font-size:24px;

    line-height:1.2;

}
.daily-performance-cards{
    grid-template-columns:1fr;
}

.brand h1{
    font-size:18px;
}

.summary-card h2{
    font-size:20px;
}

}

.modal-box{

    width:96vw;

    max-height:88vh;

    padding:18px;

}

/* ================= LOADING ================= */

.gt-loading{

    padding:20px;

}

.loading-card{

    width:100%;

    max-width:360px;

    padding:24px;

    border-radius:20px;

}

.loading-card h1{

    font-size:24px;

}

.loading-card h2{

    font-size:16px;

}

#loadingText{

    font-size:13px;

}

#loadingPercent{

    font-size:22px;

}

/* ================= LICENSE SCREEN ================= */

.license-access-panel{

    width:100%;

    max-width:380px;

    padding:24px;

    border-radius:20px;

}

.license-access-brand{

    gap:12px;

}

.license-access-brand img{

    width:48px;

    height:48px;

}

.license-access-brand strong{

    font-size:18px;

}

.license-access-brand span{

    font-size:12px;

}

.license-access-panel h1{

    font-size:28px;

    line-height:1.2;

}

.license-access-description{

    font-size:13px;

}

.license-access-details{

    grid-template-columns:1fr;

    gap:12px;

}

/* ================= MODAL ================= */

.modal-box{

    width:96vw;

    max-height:90vh;

    padding:18px;

    border-radius:18px;

}

.modal-header h2{

    font-size:18px;

}

/* ================= WATERMARK ================= */

.watermark{

    right:12px;

    bottom:12px;

    font-size:10px;

}

/* ================= FOOTER ================= */

.footer{

    padding:18px;

    flex-direction:column;

    gap:10px;

    text-align:center;

}

.footer strong{

    font-size:16px;

}

/* ================= MOBILE SCROLLBAR ================= */

::-webkit-scrollbar{

    width:5px;

    height:5px;

}

/* ================= ANIMATION ================= */

.upload-box,
.summary-card,
.rank-card,
.validation-card,
.daily-audit-card,
.performance-filter-card,
.content{

    transition:.25s ease;

}


/* ================= SAFE AREA ================= */

body{

    padding-bottom:env(safe-area-inset-bottom);

}

/* ================= TAP ================= */

button,
select,
input{

    -webkit-tap-highlight-color:transparent;

}



#resultTable{

    width:max-content;

    min-width:1400px;

}

#resultTable th,
#resultTable td{

    white-space:nowrap;

}

#resultTable{

    table-layout:auto;
}