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

body{
  font-family:Arial,sans-serif;
  background:#f5f7fb;
  padding:30px;
}

.container{

  max-width:1100px;

  margin:40px auto;

  padding:20px;

}

.total-card{

  background:linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  color:white;

  border-radius:18px;

  padding:25px;

  text-align:center;

  margin-bottom:25px;

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

}

.total-title{

  font-size:14px;

  opacity:.9;

  text-transform:uppercase;

  letter-spacing:1px;

}

.total-value{

  margin-top:10px;

  font-size:38px;

  font-weight:700;

}

.card{

  background:#ffffff;

  border-radius:16px;

  padding:25px;

  margin-bottom:25px;

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

}

.card h2{
  margin-bottom:10px;
  color:#111827;
}

button{

  background:#2563eb;

  color:white;

  border:none;

  border-radius:12px;

  padding:14px;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  transition:.2s;

}

button:hover{

  transform:translateY(-1px);

  opacity:.95;

}

button:disabled{

  background:#94a3b8;

  cursor:not-allowed;

  transform:none;

}

#loading{

  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;

  background:rgba(0,0,0,.4);

  display:none;

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

  z-index:9999;

}

.loading-box{

  background:white;

  padding:30px;

  border-radius:18px;

  min-width:220px;

  text-align:center;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.15);

}

.stats-box{

  margin-top:15px;

  border:1px solid #e5e7eb;

  border-radius:12px;

  overflow:hidden;

}

.stat-item{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 16px;

  border-bottom:1px solid #e5e7eb;

}

.stat-item:last-child{

  border-bottom:none;

}

.success{

  color:#16a34a;

}

.danger{

  color:#dc2626;

}

.spinner{

  width:45px;

  height:45px;

  border:4px solid #e5e7eb;

  border-top:4px solid #2563eb;

  border-radius:50%;

  margin:auto;

  animation:spin 1s linear infinite;

}

.loading-text{

  margin-top:15px;

  font-size:16px;

  font-weight:600;

  color:#1e293b;

}

@keyframes spin{

from{

    transform:rotate(0deg);

  }

to{

    transform:rotate(360deg);

  }

}
/* ==========================
   MENU TAB
========================== */

.form-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;

  margin-bottom:18px;

}

.form-group{

  display:flex;

  flex-direction:column;

}

.form-group label{

  margin-bottom:6px;

  font-weight:600;

  color:#334155;

}

.form-group input,

.form-group select{

  padding:12px;

  border:1px solid #d1d5db;

  border-radius:10px;

  font-size:14px;

  outline:none;

}

.form-group input:focus,

.form-group select:focus{

  border-color:#2563eb;

}

#lookBookTable{

  margin-top:20px;

}

.data-table{

  width:100%;

  border-collapse:collapse;

  margin-top:15px;

}

.data-table th{

  background:#2563eb;

  color:white;

  padding:10px;

}

.data-table td{

  border:1px solid #ddd;

  padding:10px;

}

.data-table tr:nth-child(even){

  background:#f8fafc;

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

.upload-area{

  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;

}

.upload-area input[type=file]{

  flex:1;

}

.upload-area button{

  white-space:nowrap;

}
/* =============================
   PAGE HEADER
============================= */

.page-header{

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

  margin-bottom:25px;

}

.page-header h2{

  font-size:30px;
  color:#1e293b;
  margin-bottom:6px;

}

.page-header p{

  color:#64748b;
  font-size:14px;

}

/* =============================
   MINI DASHBOARD
============================= */

.dashboard-mini{

  display:grid;

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

  gap:18px;

  margin-bottom:25px;

}

.mini-card{

  background:#fff;

  border-radius:16px;

  padding:22px;

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

}

.mini-card h3{

  color:#2563eb;

  font-size:30px;

  margin-bottom:8px;

}

.mini-card p{

  color:#64748b;

  font-size:14px;

}

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

.card-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:18px;

}

.card-subtitle{

  color:#64748b;

  font-size:13px;

}

/* =============================
   BUTTON GROUP
============================= */

.button-group{

  display:flex;

  gap:10px;

}
/* =============================
   FORM ACTION
============================= */

.form-action{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;

}

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

.empty-state{

  text-align:center;

  padding:60px 20px;

  color:#64748b;

}

.empty-icon{

  font-size:60px;

  margin-bottom:15px;

}

.empty-state h3{

  color:#1e293b;

  margin-bottom:10px;

}

/* =============================
   SELECTED FILE
============================= */

.selected-file{

  margin-top:10px;

  color:#2563eb;

  font-size:14px;

  font-weight:600;

}

/* =============================
   UPLOAD NOTE
============================= */

.upload-note{

  margin-top:12px;

  padding:12px;

  border-radius:10px;

  background:#eff6ff;

  color:#1e40af;

  font-size:13px;

  line-height:1.8;

}

/* =============================
   PAGINATION
============================= */

.pagination-wrapper{

  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:25px;

}

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

.calibration-grid{

    grid-template-columns:1fr;

}

.calibration-action{

    flex-direction:column;

}
}
/* =============================
TABLE RESPONSIVE
============================= */

.pagination-wrapper button{

  width:auto !important;

  min-width:42px;

  height:40px;

  padding:0 14px;

  border:1px solid #d1d5db;

  border-radius:8px;

  background:#ffffff;

  color:#1f2937;   /* <<< INI YANG PENTING */

  font-weight:600;

  cursor:pointer;

  transition:.2s;

}

.pagination-wrapper button:hover{

  background:#2563eb;

  color:#fff;

}

.pagination-wrapper button.active{

  background:#2563eb;

  color:#fff;

  border-color:#2563eb;

}

.pagination-wrapper button:disabled{

  background:#e5e7eb;

  color:#9ca3af;

  cursor:not-allowed;

}

.upload-hidden{

  display:none;

}
/* ===========================
   LOGO HEADER
=========================== */

.login-message{

margin-top:15px;

color:red;

font-size:14px;

}
/* ===========================
   TOP INFO
===========================*/

@media print{

@page{

        size:A4 portrait;

        margin:0;

    }

    html,

body{

        margin:0 !important;
        padding:0 !important;
        background:#fff !important;

    }

body *{

        visibility:hidden;

    }

    #printModePage,

#printModePage *{

        visibility:visible;

    }

#printPreview{

        background:#fff !important;

        padding:0 !important;

        margin:0 !important;

        min-height:auto !important;

    }

.label125-awb{

    font-size:10pt;

    font-weight:900;

    text-align:center;

    color:#000;

    line-height:9pt;

    margin-top:1mm;

}

.label125-tujuan{

    margin-top:1mm;

    font-size:8pt;

    font-weight:800;

    text-align:center;

    line-height:7pt;

    word-break:break-word;

    width:100%;

}

.label125-koli{

    margin-top:auto;

    margin-bottom:1mm;

    font-size:8pt;

    font-weight:800;

    text-align:center;

    line-height:7pt;

}

/* ==========================================
   PRINT MODE UI
========================================== */

.calibration-grid{

    display:grid;

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

    gap:20px;

}

.cal-item{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.cal-item label{

    font-weight:700;

}

.cal-control{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.cal-control span{

    min-width:70px;

    text-align:center;

    font-weight:700;

    color:#2563eb;

}

.cal-control button{

    width:38px;

    height:38px;

    padding:0;

}

.calibration-action{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:20px;

}

#printPreview{

    display:block;

    padding:30px;

    background:#eef2f7;

    border-radius:14px;

    border:1px solid #dbe3ec;

    min-height:75vh;

}

.btn-secondary{

    background:#e5e7eb;

    color:#374151;

    border:none;

    border-radius:10px;

    padding:12px 22px;

    font-weight:600;

}

.btn-secondary:hover{

    background:#d1d5db;

}
/* ==========================================
   STOCK AWB V2
========================================== */

@keyframes stockZoom{

from{

        opacity:0;

        transform:scale(.92);

    }

to{

        opacity:1;

        transform:scale(1);

    }

}