.table-toolbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:18px;

  padding:12px 16px;

  background:#f8fafc;

  border-radius:10px;

  border:1px solid #e5e7eb;

}

/* =============================
   EMPTY STATE
============================= */

.table-responsive{

    width:100%;

    overflow-x:auto;

}

.table-responsive table{

  min-width:1400px;

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

#lookBookPage .matching-container{

  max-width:1450px;

  width:100%;

  margin:auto;

}

#matchingPage .matching-top{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:25px;

  align-items:stretch;

  margin-bottom:25px;

}

#matchingPage .matching-top .card{

  display:flex;

  flex-direction:column;

}

#matchingPage .matching-center{

  margin-top:auto;

  text-align:center;

}



}

#matchingPage .upload-area{

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

  padding:18px;

  border:2px dashed #dbeafe;

  border-radius:12px;

  background:#f8fbff;

}

#matchingPage .selected-file{

  margin-top:12px;

  padding:10px 12px;

  background:#f8fafc;

  border:1px solid #e5e7eb;

  border-radius:8px;

  color:#2563eb;

  font-weight:600;

}

#matchingPage .button-group{

  display:flex;

  gap:10px;

  margin-top:18px;

}

#matchingPage .button-group button{

  flex:1;

}

#matchingPage #btnProses{

  min-width:260px;

  padding:16px 30px;

  font-size:17px;

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

#matchingPage .page-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    background:#fff;

    border-radius:18px;

    padding:20px 25px;

    margin-bottom:25px;

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

.label-preview{

    min-height:700px;

    background:#ececec;

    padding:20px;

    border:2px dashed #d1d5db;

    border-radius:12px;

    overflow:auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}
/* SHEET */

.tj121-sheet{

    width:156mm;

    min-height:205mm;

    padding-top:5mm;

    padding-left:3mm;

    padding-right:3mm;

    padding-bottom:3mm;

    display:grid;

    grid-template-columns:75mm 75mm;

    grid-template-rows:repeat(5,38mm);

    column-gap:0;

    row-gap:0;

    box-sizing:border-box;

}

/* CARD */

.tj121-card{

    width:75mm;

    height:38mm;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:4mm;

    overflow:visible;

    outline:1px dashed #d9d9d9;

    padding:2mm;

    background:#fff;

}

.tj121-card.empty{

    outline:1px dashed #eeeeee;

}

/* AWB */

.label-awb{

    text-align:center;

    font-size:13pt;

    font-weight:900;

    color:#000;

    line-height:14pt;

}

/* TUJUAN */

.label-tujuan{

    margin-top:1mm;

    text-align:center;

    font-size:11pt;

    font-weight:900;

    color:#000;

    line-height:12pt;

}

/* ITEM */

.label-item{

    margin-top:1.5mm;

    min-height:24pt;
    max-height:24pt;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    overflow:hidden;

    color:#000;

    font-weight:900;

}

/* SERVICE */

.label-service{

    margin-top:1mm;

    text-align:center;

    font-size:8.5pt;      /* sebelumnya 8pt */

    font-weight:900;

    color:#000;

    line-height:9pt;

}

/* KOLI */

.label-koli{

    margin-top:1mm;

    text-align:center;

    font-size:11pt;       /* sebelumnya 10pt */

    font-weight:900;

    color:#000;

    line-height:17pt;

}

/* PACKING */

.label-packing{

    margin-top:1mm;

    text-align:center;

    font-size:8.5pt;      /* sebelumnya 8pt */

    font-weight:900;

    color:#d60000;

    line-height:9pt;

}
/* ==========================================
   PRINT TJ121
========================================== */

#printModePage{

        position:absolute;
        left:0;
        top:0;
        width:100%;

        margin:0;
        padding:0;

        background:#fff;

    }

    .print-header,
.print-action,
.print-calibration,
.print-pagination,
.print-jump,

.print-range{

    display:none !important;

}

.print-card{

        box-shadow:none !important;

        border:none !important;

        padding:0 !important;

    }

.tj121-sheet{

        margin:0 auto;

        box-shadow:none !important;

    }

.tj121-card{

        outline:none !important;

    }

.tj125-card{

    outline:none !important;

}

.tj125-sheet{

    page-break-after:always;

    break-after:page;

    overflow:hidden;

    transform-origin:top left;

}

.tj125-sheet:last-child{

    page-break-after:auto;

    break-after:auto;

}

}

/* ==========================================
   LABEL TJ125
========================================== */

.tj125-sheet{

    width:192mm;

    height:287mm;

    margin:0 auto;

    display:grid;

     grid-template-columns:repeat(6,31mm);

    grid-template-rows:repeat(9,16mm);

    justify-content:center;

    align-content:start;

    column-gap:0;

    row-gap:0;

    box-sizing:border-box;

    overflow:visible;

}

.tj125-card{

    width:31mm;

    height:16mm;

    background:#fff;

   outline:none;

    box-sizing:border-box;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

gap:1mm;

    align-items:center;

    padding:1mm;

}

.tj125-card.empty{

    outline:1px dashed #eeeeee;

}
/* ==========================
   TJ125 CONTENT
========================== */

.print-card{
    overflow:hidden;
}

.print-header{
    margin-bottom:20px;
}

.print-header h2{
    margin:0;
    color:#1f2937;
    font-size:28px;
}

.print-subtitle{
    margin-top:6px;
    color:#64748b;
    font-size:14px;
}

.print-action{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.print-action button{
    min-width:170px;
}

.print-calibration{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

    margin-bottom:25px;

}

.print-calibration h3{

    margin-bottom:18px;

    color:#1f2937;

}

#printPreview .tj121-sheet{

    width:156mm;

    margin:0 auto 20px auto;

    page-break-after:always;

    break-after:page;

}

#printPreview .tj121-sheet:last-child{

    margin-bottom:0;

    page-break-after:auto;

    break-after:auto;

}
/* =====================================
   LABEL ENGINE V2
===================================== */

.label-sheet{

    position:relative;

    width:210mm;

    height:297mm;

    margin:0 auto;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;

}

.label-card{

    position:absolute;

    box-sizing:border-box;

    overflow:hidden;

    background:#fff;

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

.stock-table{

    width:100%;

    border-collapse:collapse;

}

.stock-table th{

    background:#f8fafc;

    padding:14px;

    text-align:center;

    font-weight:700;

    border-bottom:2px solid #e5e7eb;

}

.stock-table td{

    padding:14px;

    text-align:center;

    border-bottom:1px solid #eeeeee;

    vertical-align:middle;

}

.stock-table tr:hover{

    background:#fafafa;

}

.status-badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:#dcfce7;

    color:#15803d;

    font-weight:700;

}

.stock-summary{

    display:grid;

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

    gap:20px;

    margin-bottom:25px;

}

.summary-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

    text-align:center;

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

}

.summary-title{

    color:#64748b;

    font-size:14px;

}

.summary-value{

    margin-top:10px;

    font-size:30px;

    font-weight:700;

    color:#2563eb;

}

.status-green{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    background:#dcfce7;

    color:#15803d;

    font-weight:700;

}

.status-yellow{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    background:#fef3c7;

    color:#b45309;

    font-weight:700;

}

.status-red{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    background:#fee2e2;

    color:#b91c1c;

    font-weight:700;

}
/* ===========================
   STOCK MODAL
=========================== */

/* =====================================
   STOCK AWB MODAL
===================================== */

.stock-modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.stock-modal-content{

    width:100%;

    max-width:520px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

}

.stock-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.stock-modal-header h3{

    margin:0;

    color:#1f2937;

}

.stock-modal-header button{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#f3f4f6;

}

.stock-modal-body{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.stock-modal-body label{

    font-weight:700;

    color:#374151;

}

.stock-modal-body input{

    width:100%;

    padding:12px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:14px;

}

.stock-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:25px;

}
/* =====================================
   ADMIN PAGE
===================================== */

.table-wrapper{

    width:100%;

    overflow-x:auto;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#fff;

}

.table{

    width:100%;

    border-collapse:collapse;

}

.table thead{

    background:#f8fafc;

}

.table th{

    padding:14px 16px;

    text-align:left;

    font-size:14px;

    color:#374151;

    border-bottom:2px solid #e5e7eb;

    white-space:nowrap;

}

.table td{

    padding:14px 16px;

    border-bottom:1px solid #eeeeee;

    vertical-align:middle;

}

.table tbody tr:hover{

    background:#f8fafc;

}

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    background:#dbeafe;

    color:#1d4ed8;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}

.btnAction{

    border:none;

    border-radius:8px;

    padding:8px 12px;

    cursor:pointer;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    transition:.2s;

}

.btnAction:hover{

    transform:translateY(-1px);

    opacity:.9;

}

.stock-container{

    max-width:1500px;

    margin:auto;

}

.stock-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    gap:20px;

}

.stock-header h2{

    margin:0;

    font-size:30px;

    color:#1f2937;

}

.stock-header p{

    margin-top:6px;

    color:#64748b;

}

.stock-dashboard{

    display:grid;

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

    gap:20px;

    margin-bottom:25px;

}

.stock-card{

    background:#fff;

    border-radius:18px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

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

    transition:.25s;

}

.stock-card:hover{

    transform:translateY(-3px);

}

.stock-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

}

.stock-icon.blue{

    background:#2563eb;

}

.stock-icon.green{

    background:#16a34a;

}

.stock-icon.orange{

    background:#f59e0b;

}

.stock-icon.red{

    background:#dc2626;

}

.stock-label{

    color:#64748b;

    font-size:14px;

}

.stock-number{

    margin-top:6px;

    font-size:30px;

    font-weight:700;

    color:#111827;

}
/* ==========================================
   STOCK TOOLBAR
========================================== */

.stock-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

    flex-wrap:wrap;

}

.stock-search{

    flex:1;

    min-width:280px;

}

.stock-search input{

    width:100%;

    height:48px;

    padding:0 18px;

    border:1px solid #dbe3ec;

    border-radius:12px;

    font-size:15px;

    transition:.25s;

    outline:none;

}

.stock-search input:focus{

    border-color:#2563eb;

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

}

.stock-right{

    display:flex;

    gap:12px;

}

.stock-right select{

    height:48px;

    padding:0 14px;

    border:1px solid #dbe3ec;

    border-radius:12px;

    background:#fff;

    cursor:pointer;

}

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

.stock-table-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

}

#stockAWBPage .stock-table{

    width:100%;

    table-layout:fixed;

}
#stockAWBPage .stock-table th,

#stockAWBPage .stock-table td{

    padding:10px 8px;

    font-size:13px;

}

.stock-table-wrapper{

    width:100%;

    overflow:hidden;

}

.stock-table{

    width:100%;

    table-layout:fixed;

    border-collapse:collapse;

}

.stock-table thead th{

    padding:12px 8px;

    font-size:13px;

    white-space:nowrap;

}

.stock-table tbody td{

    padding:12px 8px;

    font-size:14px;

    text-align:center;

    word-break:break-word;

}

.stock-table tbody tr{

    transition:.2s;

}

.stock-table tbody tr:hover{

    background:#f8fbff;

}

.stock-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-top:1px solid #e5e7eb;

    background:#fff;

    flex-wrap:wrap;

    gap:15px;

}
/* ==========================================
   STATUS BADGE V2
========================================== */

.status-green,
.status-yellow,

.status-red{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:105px;

    height:34px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    color:#fff;

    border:none;

}

.status-green{

    background:linear-gradient(135deg,#22c55e,#16a34a);

}

.status-yellow{

    background:linear-gradient(135deg,#f59e0b,#d97706);

}

.status-red{

    background:linear-gradient(135deg,#ef4444,#dc2626);

}

/* ==========================================
   ACTION BUTTON
========================================== */

.btnAction{

    border:none;

    border-radius:10px;

    padding:8px 14px;

    background:#2563eb;

    color:#fff;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    margin:2px;

}

.btnAction:hover{

    transform:translateY(-2px);

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

}

.btnDanger{

    background:#ef4444;

}

.btnDanger:hover{

    box-shadow:0 6px 14px rgba(239,68,68,.25);

}

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

.stock-modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:999999;

    backdrop-filter:blur(5px);

}

.stock-modal-content{

    width:100%;

    max-width:520px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    animation:stockZoom .25s ease;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

}

.stock-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

    border-bottom:1px solid #edf2f7;

}

.stock-modal-header h3{

    margin:0;

    font-size:22px;

    color:#1f2937;

}

.stock-modal-header button{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#f3f4f6;

    cursor:pointer;

}

.stock-modal-body{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:24px;

}

.stock-modal-body label{

    font-weight:700;

    color:#374151;

}

.stock-modal-body input,

.stock-modal-body select{

    width:100%;

    height:48px;

    padding:0 14px;

    border:1px solid #dbe3ec;

    border-radius:12px;

    outline:none;

    transition:.2s;

}

.stock-modal-body input:focus,

.stock-modal-body select:focus{

    border-color:#2563eb;

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

}

.stock-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:1px solid #edf2f7;

}

.stock-modal-footer button{

    min-width:120px;

}

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