/* =====================================================
   GT AUTO SALES STAFF V3
   GESTTECH ENTERPRISE UI
===================================================== */

:root{

    /* BRAND */

    --primary:var(--gt-primary);
    --primary-hover:#1d4ed8;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    /* SURFACE */

    --bg:#f5f7fb;
    --card:#ffffff;
    --border:#e5e7eb;

    /* TEXT */

    --text:#111827;
    --text2:#6b7280;

    /* EFFECT */

    --radius:18px;

    --shadow:
        0 6px 20px rgba(15,23,42,.08);

    --transition:.25s ease;

}

/* =====================================================
   RESET
===================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        "Segoe UI",
        sans-serif;

    font-size:14px;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/* =========================================
   GESTTECH THEME ENGINE
========================================= */

:root{

--gt-primary:var(--gt-primary);
--gt-primary-light:var(--gt-primary-light);
--gt-primary-soft:var(--gt-primary-soft);

}

.container{

    width:min(1700px,95%);

    margin:auto;

    padding:30px;

}

.card{

    background:var(--card);

    border-radius:18px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-3px);

}

button{

    border:none;

    cursor:pointer;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:white;

    padding:12px 24px;

    border-radius:12px;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

input,
select{

    width:100%;

    padding:12px;

    border:1px solid var(--border);

    border-radius:12px;

    outline:none;

}

input:focus{

    border-color:var(--primary);

}

/* =====================================================
TOPBAR
===================================================== */

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:24px;

margin-bottom:28px;

padding:22px 28px;

background:#fff;

border-radius:20px;

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.brand{

display:flex;

align-items:center;

gap:18px;

}

.logo{

width:68px;

height:68px;

object-fit:contain;

}

.brand h1{

font-size:28px;

font-weight:800;

letter-spacing:.3px;

margin-bottom:4px;

}

.brand p{

color:var(--text2);

font-size:14px;

}

.version{

display:inline-block;

margin-top:8px;

padding:5px 10px;

border-radius:999px;

background:var(--gt-primary-soft);

color:var(--gt-primary);

font-size:11px;

font-weight:700;

}

.top-action{

display:flex;

align-items:center;

}

/* =====================================================
LICENSE CARD
===================================================== */

.license-status-card{

min-width:320px;

background:#fff;

border:1px solid var(--border);

border-radius:18px;

padding:18px 20px;

box-shadow:var(--shadow);

transition:.25s;

}

.license-status-card:hover{

transform:translateY(-3px);

}

.license-status-top{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

margin-bottom:14px;

}

.license-status-dot{

width:12px;

height:12px;

border-radius:50%;

background:#9ca3af;

}

.license-status-card[data-plan="FREE_ACCESS"] .license-status-dot{

background:#22c55e;

}

.license-status-card[data-plan="VIP_LIFETIME"] .license-status-dot{

background:var(--gt-primary);

}

.license-status-card[data-plan="VIP_LORD"] .license-status-dot{

background:#f59e0b;

}

.license-status-card[data-plan="FREE_EXPIRED"] .license-status-dot{

background:#dc2626;

}

.license-status-info{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

font-size:13px;

color:var(--text2);

}

.license-status-info strong{

font-size:16px;

color:#111827;

}

.license-status-footer{

font-size:12px;

color:#6b7280;

}

/* =====================================================
TITLE
===================================================== */

.container>h2{

font-size:22px;

margin:10px 0 18px;

}

/* =====================================================
UPLOAD GRID
===================================================== */

.upload-grid{

display:grid;

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

gap:22px;

margin-bottom:28px;

}

.upload-box{

background:#fff;

border:1px solid var(--border);

border-radius:18px;

padding:22px;

box-shadow:var(--shadow);

transition:.25s;

}

.upload-box:hover{

transform:translateY(-4px);

border-color:#bfdbfe;

}

.upload-box label{

display:block;

font-size:13px;

font-weight:700;

margin-bottom:16px;

color:#374151;

}

.upload-box input{

margin-bottom:16px;

background:#f8fafc;

}

.filename{

padding:12px;

background:#f9fafb;

border-radius:12px;

font-size:13px;

color:#6b7280;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

/* =====================================================
PROCESS AREA
===================================================== */

.process-area{

display:flex;

justify-content:flex-end;

gap:14px;

margin-bottom:30px;

}

.process-area button{

padding:14px 30px;

border-radius:14px;

font-size:14px;

font-weight:700;

}

.print-report-btn{

background:#111827;

color:#fff;

}

.print-report-btn:hover{

background:#000;

}

#process{

background:var(--gt-primary);

color:#fff;

}

#process:hover{

background:#1d4ed8;

transform:translateY(-2px);

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1100px){

.upload-grid{

grid-template-columns:1fr;

}

.topbar{

flex-direction:column;

align-items:flex-start;

}

.license-status-card{

width:100%;

min-width:unset;

}

.process-area{

justify-content:stretch;

flex-direction:column;

}

.process-area button{

width:100%;

}

}

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

.summary{

display:grid;

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

gap:20px;

margin-bottom:28px;

}

.summary-card{

background:#fff;

border:1px solid var(--border);

border-radius:18px;

padding:24px;

box-shadow:var(--shadow);

transition:.25s;

position:relative;

overflow:hidden;

}

.summary-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:var(--primary);

}

.summary-card:hover{

transform:translateY(-5px);

}

.summary-title{

display:block;

font-size:13px;

font-weight:700;

color:#6b7280;

margin-bottom:14px;

text-transform:uppercase;

letter-spacing:.8px;

}

.summary-card h2{

font-size:34px;

font-weight:800;

color:#111827;

word-break:break-word;

}

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

.validation-card{

background:#fff;

border-radius:20px;

padding:28px;

margin-bottom:28px;

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.validation-card h2{

margin-bottom:20px;

font-size:22px;

}

.validation-table{

width:100%;

border-collapse:collapse;

}

.validation-table td{

padding:15px 18px;

border-bottom:1px solid #eef2f7;

vertical-align:top;

}

.validation-table td:first-child{

width:240px;

font-weight:700;

background:#f8fafc;

}

#valSMStatus{

font-weight:800;

font-size:16px;

}

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

.performance-filter-card{

background:#fff;

padding:28px;

border-radius:20px;

margin-bottom:28px;

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.performance-filter-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:25px;

}

.performance-filter-heading h2{

font-size:24px;

margin:6px 0;

}

.performance-filter-heading p{

color:#6b7280;

}

.section-eyebrow{

display:inline-block;

padding:6px 12px;

border-radius:999px;

background:var(--gt-primary-soft);

color:var(--gt-primary);

font-size:11px;

font-weight:700;

letter-spacing:1px;

}

.performance-filter-status{

padding:10px 18px;

background:#eff6ff;

border-radius:999px;

font-weight:700;

color:var(--gt-primary);

}

.performance-filter-toolbar{

display:flex;

justify-content:space-between;

align-items:flex-end;

gap:30px;

flex-wrap:wrap;

}

.performance-filter-dates{

display:flex;

gap:20px;

align-items:flex-end;

flex-wrap:wrap;

}

.performance-filter-field{

display:flex;

flex-direction:column;

gap:8px;

min-width:220px;

}

.performance-filter-field label{

font-size:12px;

font-weight:700;

color:#6b7280;

}

.performance-date-control{

display:flex;

align-items:center;

background:#f8fafc;

border:1px solid var(--border);

border-radius:14px;

padding:0 15px;

}

.performance-date-control select{

border:none;

background:none;

}

.performance-date-icon{

margin-right:10px;

font-size:18px;

color:#94a3b8;

}

.performance-range-separator{

display:flex;

align-items:center;

gap:12px;

margin-bottom:12px;

}

.performance-range-separator span{

width:35px;

height:1px;

background:#d1d5db;

}

.performance-filter-actions{

display:flex;

gap:15px;

}

.performance-filter-reset{

background:#e5e7eb;

padding:13px 24px;

border-radius:12px;

font-weight:700;

}

.performance-filter-reset:hover{

background:#d1d5db;

}

.performance-filter-apply{

background:var(--gt-primary);

color:#fff;

padding:13px 28px;

border-radius:12px;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}

.performance-filter-apply:hover{

background:#1d4ed8;

}

.performance-filter-footer{

margin-top:22px;

display:flex;

justify-content:space-between;

align-items:center;

padding-top:18px;

border-top:1px solid #eef2f7;

font-size:13px;

color:#6b7280;

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1200px){

.summary{

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

}

.performance-filter-toolbar{

flex-direction:column;

align-items:stretch;

}

.performance-filter-dates{

width:100%;

}

.performance-filter-field{

flex:1;

}

}

@media(max-width:700px){

.summary{

grid-template-columns:1fr;

}

.validation-table td{

display:block;

width:100%!important;

}

.performance-filter-header{

flex-direction:column;

gap:15px;

}

.performance-filter-footer{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

}

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

.content{

background:#fff;

border:1px solid var(--border);

border-radius:20px;

padding:28px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.content-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:24px;

}

.content-header h2{

font-size:24px;

margin:8px 0;

}

.content-header p{

color:#6b7280;

}

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

/* =====================================================
ENTERPRISE TABLE V3
===================================================== */

.table-wrap{

background:#fff;

border-radius:22px;

border:1px solid #e5e7eb;

overflow:auto;

box-shadow:0 12px 30px rgba(15,23,42,.06);

}

#resultTable{

 width:max-content;

min-width:100%;

border-collapse:separate;

border-spacing:0;

font-size:14px;

background:#fff;

}

/* ================= HEADER ================= */

#resultTable thead th{

position:sticky;

top:0;

z-index:20;

padding:18px;

background:linear-gradient(
180deg,
var(--gt-primary),
#1d4ed8
);

color:#fff;

font-size:13px;

font-weight:800;

letter-spacing:.7px;

text-transform:uppercase;

white-space:nowrap;

border-bottom:none;

cursor:pointer;

transition:.2s;

}

#resultTable thead th:hover{

background:#1e40af;

}

/* ================= BODY ================= */

#resultTable tbody td{

padding:17px 16px;

border-bottom:1px solid #eef2f7;

text-align:center;

transition:.2s;

background:#fff;

}

/* zebra */

#resultTable tbody tr:nth-child(even) td:first-child{

    background:#fbfcfe;

}

#resultTable tbody tr:hover td:first-child{

    background:#eff6ff;

}
/* hover */

#resultTable tbody tr:hover td{

background:#eff6ff;

}

/* ================= STICKY STAFF ================= */

#resultTable th:first-child{

    position:sticky;

    left:0;

    z-index:50;

    background:linear-gradient(
        180deg,
        var(--gt-primary),
        #1d4ed8
    );

}

#resultTable td:first-child{

    position:sticky;

    left:0;

    z-index:30;

    background:#fff;

    min-width:260px;

    white-space:nowrap;

    text-align:left;

    font-weight:700;

}

/* ================= TOTAL ================= */

.total-row td{

background:var(--gt-primary-soft) !important;

font-weight:800;

font-size:15px;

border-top:3px solid var(--gt-primary);

}

/* ================= NUMBER ================= */

#resultTable td:nth-child(n+2){

font-variant-numeric:tabular-nums;

}

/* ================= SCROLL ================= */

.table-wrap::-webkit-scrollbar{

height:12px;

}

.table-wrap::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:999px;

}

.table-wrap::-webkit-scrollbar-track{

background:#f8fafc;

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

.ranking{

display:grid;

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

gap:22px;

margin-top:30px;

margin-bottom:30px;

}

.rank-card{

background:#fff;

border-radius:20px;

border:1px solid var(--border);

padding:24px;

box-shadow:var(--shadow);

transition:.25s;

}

.rank-card:hover{

transform:translateY(-4px);

}

.rank-card h3{

font-size:18px;

margin-bottom:20px;

}

.rank-list{

display:flex;

flex-direction:column;

gap:14px;

}

.rank-item{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px;

background:#f8fafc;

border-radius:14px;

transition:.2s;

}

.rank-item:hover{

background:#eff6ff;

}

.rank-position{

font-size:22px;

width:45px;

}

.rank-staff{

flex:1;

font-weight:700;

padding-left:10px;

}

.rank-value{

color:var(--gt-primary);

font-size:15px;

}

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

.footer{

margin-top:35px;

padding:25px 30px;

background:#111827;

color:#fff;

border-radius:20px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:13px;

}

.footer strong{

font-size:18px;

}

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

.table-wrap::-webkit-scrollbar{

height:10px;

}

.table-wrap::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:20px;

}

/* =====================================================
HOVER EFFECT
===================================================== */

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

transition:.25s;

}

.summary-card:hover,
.rank-card:hover,
.upload-box:hover,
.validation-card:hover,
.performance-filter-card:hover,
.content:hover{

box-shadow:

0 15px 35px rgba(0,0,0,.12);

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:900px){

.content{

padding:18px;

}

.footer{

flex-direction:column;

gap:15px;

text-align:center;

}

.content-header{

flex-direction:column;

align-items:flex-start;

}

.ranking{

grid-template-columns:1fr;

}

}

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

.daily-audit-card{

background:#fff;

border:1px solid var(--border);

border-radius:20px;

padding:28px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.daily-audit-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:25px;

gap:20px;

}

.daily-audit-title h2{

font-size:24px;

margin:8px 0;

}

.daily-audit-title p{

color:#6b7280;

}

.daily-audit-controls{

display:flex;

align-items:center;

gap:15px;

}

#dailyAuditDate{

min-width:220px;

}

#dailyAuditStatus{

padding:10px 18px;

border-radius:999px;

font-size:13px;

font-weight:700;

background:#e5e7eb;

color:#374151;

}

#dailyAuditStatus[data-status="VALID"]{

background:#dcfce7;

color:#15803d;

}

#dailyAuditStatus[data-status="WARNING"]{

background:#fef3c7;

color:#b45309;

}

#dailyAuditStatus[data-status="INVALID"]{

background:#fee2e2;

color:#b91c1c;

}

.daily-audit-empty{

padding:70px;

text-align:center;

color:#94a3b8;

font-size:15px;

border:2px dashed #d1d5db;

border-radius:16px;

}

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

.daily-performance-cards{

display:grid;

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

gap:18px;

margin-bottom:28px;

}

.daily-performance-card{

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:16px;

padding:20px;

transition:.25s;

}

.daily-performance-card:hover{

background:#eff6ff;

transform:translateY(-3px);

}

.daily-performance-card span{

display:block;

font-size:12px;

font-weight:700;

color:#6b7280;

margin-bottom:10px;

}

.daily-performance-card strong{

font-size:28px;

font-weight:800;

}

/* =====================================================
SECTION
===================================================== */

.daily-audit-section{

margin-top:30px;

}

.daily-audit-section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.daily-audit-section-header h3{

font-size:20px;

}

.daily-audit-section-header p{

color:#6b7280;

margin-top:4px;

}

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

.validation-detail-table{

width:100%;

border-collapse:collapse;

min-width:900px;

}

.validation-detail-table th{

background:var(--gt-primary);

color:#fff;

padding:15px;

font-size:13px;

}

.validation-detail-table td{

padding:14px;

border-bottom:1px solid #eef2f7;

text-align:center;

}

.validation-detail-table tbody tr:hover{

background:#f8fbff;

}

.daily-staff-total-row{

background:#e8f0ff;

font-weight:700;

}

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

.daily-validation-overview{

display:grid;

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

gap:18px;

margin-bottom:25px;

}

.daily-validation-overview div{

background:#f8fafc;

padding:18px;

border-radius:15px;

border:1px solid #e5e7eb;

}

.daily-validation-overview span{

display:block;

font-size:12px;

color:#6b7280;

margin-bottom:8px;

}

.daily-validation-overview strong{

font-size:22px;

}

.daily-validation-group{

margin-top:25px;

padding:22px;

background:#fafafa;

border-radius:16px;

border:1px solid #e5e7eb;

}

.daily-validation-group h4{

margin-bottom:18px;

font-size:18px;

}

.daily-validation-item{

padding:15px;

background:#fff;

border-radius:12px;

margin-bottom:12px;

border:1px solid #e5e7eb;

display:flex;

flex-direction:column;

gap:6px;

}

.daily-validation-anomaly{

border-left:5px solid #dc2626;

}

.daily-validation-clean{

padding:40px;

text-align:center;

background:#dcfce7;

border-radius:18px;

color:#166534;

margin-top:25px;

}

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

.modal{

position:fixed;

inset:0;

background:rgba(15,23,42,.55);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

backdrop-filter:blur(6px);

}

.modal.show{

display:flex;

}

.modal-box{

background:#fff;

width:min(1200px,92vw);

max-height:90vh;

overflow:auto;

border-radius:22px;

padding:28px;

box-shadow:

0 20px 60px rgba(0,0,0,.25);

animation:modalOpen .25s ease;

}

.modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:24px;

}

.modal-header h2{

font-size:24px;

}

.modal-header button{

width:42px;

height:42px;

border-radius:50%;

background:#f3f4f6;

font-size:20px;

}

.modal-header button:hover{

background:#ef4444;

color:#fff;

}

@keyframes modalOpen{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}

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

.gt-loading{

position:fixed;

inset:0;

background:rgba(15,23,42,.75);

display:none;

justify-content:center;

align-items:center;

z-index:10000;

backdrop-filter:blur(8px);

}

.gt-loading.show{

display:flex;

}

.loading-card{

width:430px;

background:#fff;

padding:40px;

border-radius:24px;

text-align:center;

box-shadow:

0 25px 70px rgba(0,0,0,.35);

}

.loading-card h1{

font-size:30px;

margin-bottom:10px;

}

.loading-card h2{

margin-bottom:12px;

}

.loading-bar{

height:10px;

background:#e5e7eb;

border-radius:999px;

overflow:hidden;

margin:25px 0 15px;

}

#loadingProgress{

height:100%;

width:0;

background:linear-gradient(90deg,var(--gt-primary),#38bdf8);

transition:.4s;

}

#loadingPercent{

font-size:26px;

font-weight:800;

color:var(--gt-primary);

}

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

.watermark{

position:fixed;

bottom:20px;

right:25px;

font-size:12px;

color:#9ca3af;

font-weight:700;

pointer-events:none;

opacity:.6;

}

/* =====================================================
PRINT ROOT
===================================================== */

#printReportRoot{

display:none;

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:768px){

.daily-audit-header{

flex-direction:column;

}

.daily-audit-controls{

width:100%;

flex-direction:column;

align-items:stretch;

}

.modal-box{

width:96vw;

padding:18px;

}

.loading-card{

width:92vw;

padding:25px;

}

}

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

.license-access-screen{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(15,23,42,.92);

backdrop-filter:blur(10px);

z-index:999999;

}

.license-access-screen.show{

display:flex;

}

.license-access-panel{

width:min(720px,92vw);

background:#fff;

border-radius:24px;

padding:40px;

box-shadow:0 25px 70px rgba(0,0,0,.35);

}


/* ==========================================
LICENSE ACCESS CONTENT
========================================== */

.license-access-brand{

display:flex;

align-items:center;

gap:16px;

margin-bottom:24px;

}

.license-access-brand img{

width:60px;

height:60px;

object-fit:contain;

flex-shrink:0;

}

.license-access-brand strong{

display:block;

font-size:22px;

font-weight:800;

}

.license-access-brand span{

display:block;

margin-top:4px;

font-size:14px;

color:#64748b;

}

.license-access-badge{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:#fee2e2;

color:#b91c1c;

font-size:12px;

font-weight:700;

margin-bottom:20px;

}

.license-access-panel h1{

margin:18px 0;

font-size:42px;

font-weight:800;

line-height:1.15;

}

.license-access-description{

margin-bottom:24px;

line-height:1.6;

color:#475569;

}

.license-access-details{

display:grid;

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

gap:16px;

margin-bottom:24px;

}

.license-access-details>div{

padding:16px;

background:#f8fafc;

border-radius:14px;

}

.license-access-details span{

display:block;

font-size:12px;

color:#64748b;

margin-bottom:6px;

}

.license-access-details strong{

font-size:16px;

font-weight:700;

}

.license-access-action{

margin-bottom:20px;

}

.license-access-action strong{

display:block;

margin-bottom:4px;

}

.license-access-code{

font-size:12px;

color:#94a3b8;

}

.print-watermark{

display:none;

}

#printWatermark{

display:none;

}

#printReportRoot{

display:none;

}

/* =====================================================
UPLOAD AREA V2
===================================================== */

.upload-grid{

display:grid;

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

gap:24px;

margin:28px 0 34px;

}

.upload-box{

position:relative;

background:#fff;

border:1px solid #e8edf5;

border-radius:22px;

padding:26px;

box-shadow:0 10px 30px rgba(15,23,42,.06);

transition:.25s;

overflow:hidden;

}

.upload-box::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--gt-primary),#38bdf8);

}

.upload-box:hover{

transform:translateY(-6px);

border-color:#93c5fd;

box-shadow:0 18px 45px rgba(37,99,235,.12);

}

.upload-box label{

display:flex;

align-items:center;

gap:10px;

font-size:13px;

font-weight:800;

letter-spacing:.6px;

text-transform:uppercase;

color:#1e293b;

margin-bottom:18px;

}

.upload-box label::before{

content:"📄";

font-size:18px;

}

.upload-box input[type=file]{

padding:14px;

background:#f8fafc;

border:2px dashed #cbd5e1;

border-radius:16px;

cursor:pointer;

transition:.25s;

}

.upload-box input[type=file]:hover{

background:#eff6ff;

border-color:#3b82f6;

}

.filename{

margin-top:15px;

padding:14px 16px;

background:#f8fafc;

border-radius:14px;

border:1px solid #e5e7eb;

font-size:13px;

font-weight:600;

color:#475569;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

/* =====================================================
PROCESS BAR
===================================================== */

.process-area{

display:flex;

justify-content:flex-end;

align-items:center;

gap:18px;

margin-bottom:36px;

}

.process-area button{

height:54px;

padding:0 34px;

border-radius:16px;

font-size:14px;

font-weight:700;

letter-spacing:.4px;

transition:.25s;

}

.print-report-btn{

background:#111827;

color:#fff;

}

.print-report-btn:hover{

background:#000;

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(0,0,0,.22);

}

#process{

background:linear-gradient(135deg,var(--gt-primary),#3b82f6);

color:#fff;

box-shadow:0 14px 30px rgba(37,99,235,.25);

}

#process:hover{

transform:translateY(-3px);

box-shadow:0 20px 40px rgba(37,99,235,.35);

}

#process:disabled{

opacity:.6;

cursor:not-allowed;

transform:none;

box-shadow:none;

}

/* =====================================================
KPI SUMMARY V2
===================================================== */

.summary{

display:grid;

grid-template-columns:repeat(5,minmax(220px,1fr));

gap:24px;

margin-bottom:34px;

}

.summary-card{

position:relative;

background:#fff;

border-radius:22px;

padding:26px;

overflow:hidden;

border:1px solid #e7ecf3;

box-shadow:
0 12px 30px rgba(15,23,42,.06);

transition:.28s;

}

.summary-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:6px;

background:linear-gradient(
90deg,
var(--gt-primary),
var(--gt-primary-light)
);

}

.summary-card:hover{

transform:translateY(-6px);

box-shadow:
0 20px 45px rgba(37,99,235,.12);

}

.summary-title{

display:block;

font-size:12px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

color:#64748b;

margin-bottom:18px;

}

.summary-card h2{

font-size:36px;

font-weight:800;

line-height:1;

color:#0f172a;

margin-bottom:14px;

word-break:break-word;

}

.summary-card::after{

position:absolute;

right:20px;

bottom:18px;

font-size:42px;

opacity:.08;

font-weight:900;

}

.summary-card:nth-child(1)::after{

content:"👥";

}

.summary-card:nth-child(2)::after{

content:"💰";

}

.summary-card:nth-child(3)::after{

content:"🧾";

}

.summary-card:nth-child(4)::after{

content:"📦";

}

.summary-card:nth-child(5)::after{

content:"📈";

}

@media(max-width:1400px){

.summary{

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

}

}

@media(max-width:900px){

.summary{

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

}

}

@media(max-width:600px){

.summary{

grid-template-columns:1fr;

}

}

/* =========================================
   THEME TOGGLE
========================================= */

.top-action{

display:flex;
align-items:center;
gap:14px;

}

.theme-toggle{

width:48px;
height:48px;

border:none;
outline:none;

cursor:pointer;

font-size:20px;

border-radius:14px;

background:white;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

transition:.25s;

}

.theme-toggle:hover{

transform:translateY(-2px);

box-shadow:
0 14px 35px rgba(0,0,0,.18);

}

.theme-toggle:active{

transform:scale(.95);

}

/* =========================================
   THEME SELECTOR
========================================= */

.theme-selector{

display:flex;
align-items:center;
gap:12px;

padding:10px 16px;

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:16px;

box-shadow:
0 8px 22px rgba(15,23,42,.08);

}

.theme-selector label{

font-size:12px;

font-weight:800;

letter-spacing:1px;

color:#64748b;

text-transform:uppercase;

white-space:nowrap;

}

#themeColor{

appearance:none;

padding:11px 42px 11px 14px;

border:none;

border-radius:12px;

background:
linear-gradient(180deg,#ffffff,#f8fafc);

font-size:14px;

font-weight:700;

color:#0f172a;

cursor:pointer;

outline:none;

transition:.25s;

min-width:180px;

}

#themeColor:hover{

background:#eff6ff;

}

#themeColor:focus{

box-shadow:
0 0 0 4px rgba(37,99,235,.18);

}

/* =====================================================
   GESTTECH ENTERPRISE PRINT THEME V4
   PART 1
===================================================== */

@media print{

@page{

    size:A4 landscape;

    margin:8mm;

}

/* =====================================================
RESET
===================================================== */

html,
body{

    width:297mm;
    height:210mm;

    background:#fff !important;

    color:#111827;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;

}

body *{

    visibility:hidden;

}

#printReportRoot,
#printReportRoot *{

    visibility:visible;

}

.container,
.topbar,
.footer,
.watermark,
#printWatermark{

    display:none !important;

}

#printReportRoot{

    display:block !important;

    position:absolute;

    inset:0;

    width:100%;

    background:#fff;

    color:#111827;

}

/* =====================================================
REPORT ROOT
===================================================== */

.print-report{

    position:relative;

    width:100%;

    min-height:190mm;

    padding:0;

}

/* =====================================================
HEADER
===================================================== */

.print-report-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-bottom:10px;

    margin-bottom:14px;

    border-bottom:2px solid #2563eb;

}

/* LEFT */

.print-report-brand{

    display:flex;

    align-items:center;

    gap:16px;

}

.print-report-logo{

    width:58px;

    height:58px;

    object-fit:contain;

}

.print-report-title{

    display:flex;

    flex-direction:column;

}

.print-report-title h1{

    font-size:24px;

    font-weight:800;

    letter-spacing:.5px;

    margin:0;

    color:#111827;

}

.print-report-title p{

    margin-top:4px;

    font-size:11px;

    color:#64748b;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* RIGHT */

.print-report-meta{

    width:260px;

    display:flex;

    flex-direction:column;

    gap:4px;

    align-items:flex-end;

}

.print-report-meta strong{

    font-size:15px;

    color:#2563eb;

}

.print-report-meta span{

    font-size:9px;

    color:#374151;

    line-height:1.4;

}

/* =====================================================
LICENSE BADGE
===================================================== */

.print-account-status{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:6px;

    margin-top:10px;

}

.print-account-status span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    border:1px solid #d1d5db;

    background:#f8fafc;

    font-size:9px;

    font-weight:700;

    color:#111827;

}

/* =====================================================
SECTION TITLE
===================================================== */

.print-report-section{

    margin-bottom:14px;

}

.print-report-section-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:8px;

    padding-bottom:5px;

    border-bottom:1px solid #dbe4f0;

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#2563eb;

}

.print-report-section-title::before{

    content:"";

    width:6px;

    height:16px;

    border-radius:20px;

    background:#2563eb;

}

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

.print-summary{

    display:grid;

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

    gap:8px;

    margin-bottom:14px;

}

/* KPI CARD */

.print-summary-card{

    position:relative;

    overflow:hidden;

    border:1px solid #dbe4f0;

    border-radius:10px;

    padding:10px 12px;

    background:#fff;

}

.print-summary-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#2563eb;

}

.print-summary-card span{

    display:block;

    font-size:8px;

    font-weight:700;

    color:#64748b;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:6px;

}

.print-summary-card strong{

    display:block;

    font-size:13px;

    font-weight:800;

    color:#111827;

    word-break:break-word;

}

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

.print-report::after{

    content:"GESTTECH";

    position:absolute;

    left:50%;

    top:48%;

    transform:translate(-50%,-50%);

    font-size:82px;

    font-weight:900;

    letter-spacing:8px;

    color:#2563eb;

    opacity:.035;

    pointer-events:none;

    z-index:0;

}

.print-report>*{

    position:relative;

    z-index:2;

}


/* =====================================================
   GESTTECH ENTERPRISE PRINT THEME V4
   PART 2
   PERFORMANCE TABLE + RANKING
===================================================== */

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

.print-performance-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    font-size:8.7px;

    border:1px solid #cbd5e1;

    margin-top:4px;

    margin-bottom:12px;

}

.print-performance-table thead{

    display:table-header-group;

}

.print-performance-table thead th{

    background:#2563eb !important;

    color:#fff !important;

    padding:6px 4px;

    border:1px solid #1d4ed8;

    text-align:center;

    font-size:8px;

    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;

    white-space:nowrap;

}

.print-performance-table tbody td{

    padding:5px 4px;

    border:1px solid #dbe4f0;

    text-align:center;

    vertical-align:middle;

    color:#111827;

    word-break:break-word;

}

/* STAFF */

.print-performance-table tbody td:first-child{

    text-align:left;

    font-weight:700;

    width:90px;

}

/* SALES */

.print-performance-table tbody td:nth-child(2){

    font-weight:700;

}

/* ZEBRA */

.print-performance-table tbody tr:nth-child(even){

    background:#f8fbff;

}

/* HOVER */

.print-performance-table tbody tr:hover{

    background:#eef5ff;

}

/* TOTAL */

.print-performance-table .total-row{

    background:#dbeafe !important;

}

.print-performance-table .total-row td{

    font-weight:800;

    border-top:2px solid #2563eb;

    border-bottom:2px solid #2563eb;

}

/* NUMBER */

.print-performance-table td{

    font-variant-numeric:tabular-nums;

}

/* AVOID SPLIT */

.print-performance-table{

    page-break-inside:avoid;

}

.print-performance-table tr{

    page-break-inside:avoid;

}

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

.print-ranking-grid{

    display:grid;

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

    gap:8px;

    margin-top:8px;

}

/* CARD */

.print-ranking-card{

    border:1px solid #dbe4f0;

    border-radius:10px;

    background:#fff;

    overflow:hidden;

}

.print-ranking-card h3{

    background:#eff6ff;

    color:#1d4ed8;

    font-size:9px;

    font-weight:800;

    text-align:center;

    padding:7px;

    border-bottom:1px solid #dbeafe;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* LIST */

.print-ranking-list{

    padding:4px 8px;

}

/* ITEM */

.print-ranking-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:6px;

    padding:5px 0;

    border-bottom:1px dashed #dbe4f0;

    font-size:8px;

}

.print-ranking-item:last-child{

    border-bottom:none;

}

/* POSITION */

.print-ranking-position{

    width:18px;

    font-weight:800;

    color:#2563eb;

}

/* STAFF */

.print-ranking-staff{

    flex:1;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-weight:700;

}

/* VALUE */

.print-ranking-value{

    font-weight:800;

    color:#111827;

}

/* =====================================================
SECTION GAP
===================================================== */

.print-report-section{

    page-break-inside:avoid;

}

/* =====================================================
FIT A4
===================================================== */

.print-summary{

    margin-bottom:10px;

}

.print-ranking-grid{

    margin-bottom:6px;

}

.print-report{

    zoom:.92;

}

/* =====================================================
   GESTTECH ENTERPRISE PRINT THEME V4
   PART 3
   FOOTER • BADGES • WATERMARK • FINAL
===================================================== */

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

.print-report-footer{

    margin-top:10px;

    padding-top:8px;

    border-top:2px solid #dbe4f0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:8px;

    color:#64748b;

    line-height:1.4;

}

.print-report-footer::before{

    content:"GESTTECH ENTERPRISE";

    font-weight:800;

    color:#2563eb;

}

.print-report-footer::after{

    content:"CONFIDENTIAL";

    font-weight:700;

    color:#dc2626;

}


/* =====================================================
META BADGES
===================================================== */

.print-report-meta span{

    display:inline-block;

    padding:2px 0;

}

.print-report-meta strong{

    display:block;

    margin-bottom:4px;

    font-size:15px;

}


/* =====================================================
LICENSE BADGE COLORS
===================================================== */

.print-account-status span{

    background:#f8fafc;

    border:1px solid #cbd5e1;

}

.print-account-status span:nth-child(1){

    background:#eff6ff;

    color:#1d4ed8;

}

.print-account-status span:nth-child(2){

    background:#fef3c7;

    color:#92400e;

}

.print-account-status span:nth-child(3){

    background:#dcfce7;

    color:#166534;

}


/* =====================================================
PRINT SECTION
===================================================== */

.print-report-section{

    break-inside:avoid;

    page-break-inside:avoid;

}

.print-report-section-title{

    margin-top:2px;

}


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

.print-performance-table{

    box-shadow:none;

}

.print-performance-table th{

    background:#2563eb !important;

    color:#fff !important;

}

.print-performance-table td{

    background:#fff;

}

.print-performance-table tbody tr:nth-child(even) td{

    background:#f8fbff;

}

.print-performance-table tbody tr.total-row td{

    background:#dbeafe !important;

}


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

.print-summary-card{

    min-height:58px;

}

.print-summary-card strong{

    font-size:14px;

}

.print-summary-card span{

    letter-spacing:.8px;

}


/* =====================================================
RANK CARD
===================================================== */

.print-ranking-card{

    box-shadow:none;

}

.print-ranking-card h3{

    background:#2563eb;

    color:#fff;

}

.print-ranking-item{

    min-height:18px;

}


/* =====================================================
LOGO
===================================================== */

.print-report-logo{

    filter:contrast(1.05);

}


/* =====================================================
REMOVE EXTRA SHADOW
===================================================== */

.print-report *{

    box-shadow:none !important;

    text-shadow:none !important;

}


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

.print-report::before{

    content:"GESTTECH";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) rotate(-28deg);

    font-size:92px;

    font-weight:900;

    letter-spacing:12px;

    color:#2563eb;

    opacity:.025;

    z-index:0;

    pointer-events:none;

}


/* =====================================================
NO PAGE BREAK
===================================================== */

.print-summary,
.print-ranking-grid,
.print-performance-table,
.print-report-header,
.print-report-footer{

    page-break-inside:avoid;

    break-inside:avoid;

}


/* =====================================================
PRINT QUALITY
===================================================== */

*{

    -webkit-print-color-adjust:exact;

    print-color-adjust:exact;

}


/* =====================================================
FIT TO A4
===================================================== */

.print-report{

    transform-origin:top left;

    zoom:.88;

}


/* =====================================================
HIDE UNUSED
===================================================== */

.modal,
.gt-loading,
.license-access-screen,
#loading,
#staffModal,
#validationModal{

    display:none !important;

}


/* =====================================================
END
===================================================== */

}

/* Tambahan css*/

/* =====================================================
   MOBILE RESPONSIVE V4
===================================================== */

@media (max-width:768px){

.container{
    width:100%;
    padding:14px;
}

.topbar{
    flex-direction:column;
    align-items:stretch;
    padding:18px;
}

.brand{
    flex-direction:column;
    text-align:center;
}

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

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

.top-action{
    flex-direction:column;
    width:100%;
}

.theme-selector,
.license-status-card{
    width:100%;
}

.upload-grid{
    grid-template-columns:1fr;
}

.process-area{
    flex-direction:column;
}

.process-area button{
    width:100%;
}

.summary{
    grid-template-columns:1fr;
}

.performance-filter-header{
    flex-direction:column;
}

.performance-filter-toolbar{
    flex-direction:column;
}

.performance-filter-dates{
    flex-direction:column;
}

.performance-filter-field{
    width:100%;
    min-width:0;
}

.performance-filter-actions{
    flex-direction:column;
}

.performance-filter-actions button{
    width:100%;
}

.daily-audit-header{
    flex-direction:column;
}

.daily-audit-controls{
    flex-direction:column;
    width:100%;
}

#dailyAuditDate{
    width:100%;
    min-width:0;
}

.validation-table{
    display:block;
    overflow-x:auto;
}

.table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

#resultTable{
    min-width:1100px;
}

.ranking{
    grid-template-columns:1fr;
}

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

.modal-box{
    width:96vw;
    padding:16px;
}

.loading-card{
    width:95%;
}

.watermark{
    display:none;
}

}

@media (max-width:480px){

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

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

.content,
.validation-card,
.daily-audit-card,
.performance-filter-card{
    padding:16px;
}

.upload-box{
    padding:18px;
}

#themeColor{
    min-width:100%;
}

}

#resultTable td,
#resultTable th{

    white-space:nowrap;

}