.page{

    max-width:500px;

    margin:auto;

    padding:20px;

}

.page-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.page-header h1{

    font-size:28px;

    font-weight:700;

    color:#222;

}

.back-button{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#333;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.card{

    background:#FFFFFF;

    border-radius:24px;

    padding:22px;

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

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#444;

}

.form-group input,
.form-group select{

    width:100%;

    height:48px;

    border:1px solid #D9DDE3;

    border-radius:12px;

    padding:0 14px;

    font-size:15px;

    font-family:'Poppins',sans-serif;

    background:#FFFFFF;

}

.form-group input:focus,
.form-group select:focus{

    outline:none;

    border-color:#3B82F6;

}

.btn-primary{

    width:100%;

    height:50px;

    border:2px solid #16A34A;

    border-radius:14px;

    background:#FFFFFF;

    color:#16A34A;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}


/* ==========================================
   GARIS PEMBATAS
========================================== */

.divider{

    border:none;

    border-top:1px solid #E5E7EB;

    margin:25px 0;

}

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

.section-title{

    font-size:20px;

    font-weight:600;

    margin-bottom:15px;

    color:#222;

}

/* ==========================================
   TABEL
========================================== */

.table-wrapper{

    margin-bottom:18px;

    overflow-x:auto;

}

.data-table{

    width:100%;

    border-collapse:collapse;

    font-size:13px;

}

.data-table thead{

    background:#F8FAFC;

}

.data-table th{

    padding:14px 8px;

    text-align:left;

    font-weight:600;

    color:#555;

    border-bottom:2px solid #E5E7EB;

}

.data-table td{

    padding:14px 8px;

    border-bottom:1px solid #F1F5F9;

}

.data-table tbody tr:hover{

    background:#FAFAFA;

}

.data-table th:nth-child(3),
.data-table td:nth-child(3){

    width:55px;

    text-align:center;

}

.data-table th:nth-child(4),
.data-table td:nth-child(4){

    width:110px;

    text-align:center;

    white-space:nowrap;

}

.data-table th:nth-child(5),
.data-table td:nth-child(5){

    width:85px;

    text-align:right;

}

/* ==========================================
   TOMBOL HAPUS
========================================== */

.btn-delete{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:#FEE2E2;

    color:#DC2626;

    cursor:pointer;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.btn-delete:hover{

    background:#FECACA;

}

/* ==========================================
   TOMBOL SIMPAN
========================================== */

.btn-success{

    width:100%;

    height:50px;

    border:none;

    border-radius:14px;

    background:#16A34A;

    color:#FFFFFF;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-success:hover{

    background:#15803D;

}
/* ==========================================
   RINGKASAN TOTAL
========================================== */

.summary{

    background:#FFFFFF;

    border:1px solid #ECECEC;

    border-radius:16px;

    padding:18px;

    margin-bottom:20px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px dashed #E5E7EB;

}

.summary-item:last-child{

    border-bottom:none;

    margin-top:10px;

    padding-top:18px;

}

.summary-item span{

    color:#555;

    font-size:15px;

}

.summary-item strong{

    color:#222;

    font-size:16px;

    font-weight:600;

}

.summary-item:last-child span{

    font-size:17px;

    font-weight:700;

    color:#111827;

}

.summary-item:last-child strong{

    font-size:24px;

    font-weight:700;

    color:#16A34A;

}

.profit{

    color:#16A34A;

}


/* ==========================================
   RATA TENGAH & KANAN
========================================== */

.center{

    text-align:center;

}

.right{

    text-align:right;

}
/* ======================================
   INFO STOK
====================================== */

.stok-info{

    height:48px;

    display:flex;

    align-items:center;

    padding:0 14px;

    border-radius:12px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    font-weight:600;

    color:#555;

    font-size:14px;

}

.stok-info.aman{

    color:#16A34A;

    background:#EAFBF1;

    border-color:#BBF7D0;

}

.stok-info.menipis{

    color:#B45309;

    background:#FFF7ED;

    border-color:#FED7AA;

}

.stok-info.habis{

    color:#DC2626;

    background:#FEF2F2;

    border-color:#FECACA;

}

/* ======================================
   ID PESANAN + ICON SCAN
====================================== */

.input-with-icon{

    position: relative;

}

.input-with-icon input{

    width:100%;

    padding-right:55px;

}

.scan-button{

    position:absolute;

    top:50%;

    right:8px;

    transform:translateY(-50%);

    width:40px;

    height:40px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}

.scan-button:hover{

    background:#f1f5f9;

}

.scan-button .material-symbols-rounded{

    font-size:24px;

    color:#666;

}
/* =========================================
   MESSAGE BOX
========================================= */

.message-box {
    display: none;
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.message-box.warning {
    background: #FFF8E1;
    color: #8A6D3B;
    border: 1px solid #F4D03F;
}

.message-box.success {
    background: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #81C784;
}

.message-box.error {
    background: #FDECEC;
    color: #C62828;
    border: 1px solid #EF9A9A;
}
/* =========================================
   CONFIRM DIALOG
========================================= */

.confirm-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.confirm-dialog{

    width:420px;
    max-width:90%;

    background:#fff;

    border-radius:12px;

    padding:24px;

    animation:zoomIn .2s ease;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.confirm-dialog h3{

    margin:0 0 12px;

}

.confirm-dialog p{

    margin:6px 0;
    white-space:pre-line;

}

.confirm-detail{

    margin:20px 0;

    padding:15px;

    background:#f7f7f7;

    border-radius:8px;

}

.confirm-action{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}

.btn-danger{

    background:#dc3545;

    color:#fff;

    border:none;

    padding:10px 20px;

    border-radius:8px;

    cursor:pointer;

}

.btn-danger:hover{

    background:#bb2d3b;

}

.btn-secondary{

    background:#F1F5F9;

    color:#444;

    border:none;

    padding:10px 20px;

    border-radius:8px;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

.btn-secondary:hover{

    background:#E2E8F0;

}

/* ===================================================
   KOTAK GABUNGAN: PRODUK (SEARCHABLE) + VARIAN + QTY
=================================================== */

.combo-box{

    display:flex;

    align-items:stretch;

    border:1px solid #D9DDE3;

    border-radius:14px;

    background:#fff;

    overflow:visible;

}

.combo-divider{

    width:1px;

    background:#E5E7EB;

    margin:8px 0;

}

.combo-box select{

    border:none;

    background:transparent;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    height:48px;

    padding:0 10px;

    color:#222;

}

.combo-varian{

    flex:1.1;

    min-width:0;

}

.combo-qty{

    flex:0.6;

    text-align:center;

}

/* Searchable select (Produk) */

.ss-wrap{

    position:relative;

    flex:1.3;

    min-width:0;

}

.ss-trigger{

    width:100%;

    height:48px;

    border:none;

    background:transparent;

    text-align:left;

    padding:0 14px;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    color:#9CA3AF;

    cursor:pointer;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.ss-trigger.terisi{

    color:#222;

    font-weight:500;

}

.ss-panel{

    display:none;

    position:absolute;

    top:52px;

    left:0;

    width:270px;

    max-width:85vw;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:14px;

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

    z-index:60;

    padding:10px;

}

.ss-panel.terbuka{

    display:block;

}

.ss-search{

    width:100%;

    height:40px;

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:0 12px;

    font-family:'Poppins',sans-serif;

    font-size:13px;

    margin-bottom:8px;

    box-sizing:border-box;

}

.ss-list{

    max-height:220px;

    overflow-y:auto;

}

.ss-item{

    padding:10px 10px;

    border-radius:8px;

    font-size:14px;

    cursor:pointer;

}

.ss-item:hover{

    background:#F1F5F9;

}

.ss-empty{

    padding:10px;

    color:#9CA3AF;

    font-size:13px;

    text-align:center;

}

.pesan-info{

    margin-top:8px;

    font-size:13px;

    color:#DC2626;

    background:#FEF2F2;

    border:1px solid #FECACA;

    border-radius:10px;

    padding:10px 12px;

}

.chip-list-produk{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:12px;

}

.chip-produk{

    display:flex;

    align-items:center;

    gap:10px;

    background:#F1F5F9;

    border-radius:12px;

    padding:8px 8px 8px 14px;

    font-size:13px;

    color:#333;

}

.chip-produk button{

    width:22px;

    height:22px;

    border:none;

    border-radius:50%;

    background:#FEE2E2;

    color:#DC2626;

    cursor:pointer;

    font-size:13px;

    line-height:1;

}

.btn-tambah-kecil{

    height:44px;

    padding:0 18px;

    border:2px solid #16A34A;

    background:#fff;

    color:#16A34A;

    border-radius:12px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    cursor:pointer;

}

/* ===================================================
   DAFTAR PESANAN + CHECKBOX
=================================================== */

.tabel-pesanan{

    width:100%;

    border-collapse:collapse;

    font-size:13px;

}

.tabel-pesanan th{

    text-align:left;

    padding:10px 8px;

    color:#6B7280;

    border-bottom:2px solid #E5E7EB;

    white-space:nowrap;

}

.tabel-pesanan td{

    padding:10px 8px;

    border-bottom:1px solid #F1F5F9;

    vertical-align:top;

}

.tabel-pesanan .produk-cell strong{

    display:block;

    font-size:13.5px;

    color:#222;

}

.tabel-pesanan .produk-cell span{

    display:block;

    font-size:12px;

    color:#9CA3AF;

}

.toolbar-terpilih{

    display:none;

    align-items:center;

    justify-content:space-between;

    background:#FEF2F2;

    border:1px solid #FECACA;

    border-radius:12px;

    padding:10px 14px;

    margin-bottom:10px;

    font-size:13px;

    color:#7f1d1d;

}

.toolbar-terpilih.tampil{

    display:flex;

}

.toolbar-terpilih button{

    background:#DC2626;

    color:#fff;

    border:none;

    padding:8px 16px;

    border-radius:8px;

    font-weight:600;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

@keyframes zoomIn{

    from{

        transform:scale(.95);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}
/* =========================================
   DELETE BUTTON (lihat definisi .btn-delete di bagian atas file)
========================================= */

.btn-delete .material-icons{

    font-size:20px;

}
/* ===================================================
   INPUT BIAYA KERUGIAN (menu Return)
=================================================== */

.input-kerugian{

    width:90px;

    height:36px;

    border:1px solid #E5E7EB;

    border-radius:8px;

    padding:0 8px;

    font-family:'Poppins',sans-serif;

    font-size:13px;

}

/* ===================================================
   SEL PRODUK GABUNGAN (menu Return) - Produk / Warna / Ukuran(Qty)
=================================================== */

.produk-cell-return strong{

    display:block;

    font-size:13.5px;

    color:#222;

}

.produk-cell-return span{

    display:block;

    font-size:12px;

    color:#6B7280;

}

.produk-cell-return .qty-inline{

    display:inline;

    color:#1E3A8A;

    font-weight:600;

}

/* ===================================================
   EMPTY STATE (dipakai di tabel yang datanya kosong)
=================================================== */

.empty-state{
    text-align:center;
    color:#9CA3AF;
    font-size:13px;
    padding:24px 10px;
}

/* ===================================================
   PAGINASI TABEL (100 baris per halaman)
=================================================== */

.paginasi-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    flex-wrap:wrap;
    gap:10px;
}

.paginasi-info{
    font-size:12px;
    color:#9CA3AF;
}

.paginasi-tombol{
    display:flex;
    align-items:center;
    gap:10px;
}

.paginasi-tombol button{
    min-width:36px;
    padding:0 12px;
}

.paginasi-halaman{
    font-size:12.5px;
    color:#374151;
    font-weight:600;
}

.peringatan-harga-modal{
    background:#FEE2E2;
    color:#DC2626;
    font-size:12.5px;
    font-weight:600;
    padding:10px 12px;
    border-radius:10px;
    margin-top:10px;
    line-height:1.5;
}

.chip-produk.chip-bermasalah{
    background:#FEE2E2;
    border:1px solid #FCA5A5;
}

.chip-produk.chip-bermasalah span{
    color:#DC2626;
}

/* ======================================================
   DAFTAR RETURN - kartu vertikal (bukan tabel lebar), supaya
   di HP tidak perlu geser samping untuk isi Biaya Kerugian
   ====================================================== */

.pilih-semua-return{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#374151;
    margin:14px 0 10px;
}

.daftar-return-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.return-card{
    position:relative;
    border:1px solid #ECECEC;
    border-radius:14px;
    padding:12px 40px 12px 14px;
}

.btn-hapus-card-return{
    position:absolute;
    top:10px;
    right:10px;
    width:26px;
    height:26px;
    border:none;
    background:#FEE2E2;
    color:#DC2626;
    border-radius:8px;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.btn-hapus-card-return:active{
    background:#FECACA;
}

.return-card-head{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px solid #F3F4F6;
}

.return-card-head input[type="checkbox"]{
    margin-top:3px;
    flex-shrink:0;
}

.return-card-info{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.return-card-info strong{
    font-size:13.5px;
    color:#111827;
}

.return-card-info span{
    font-size:12.5px;
    color:#6B7280;
}

.return-card-mp{
    color:#374151 !important;
    font-weight:600;
}

.return-card-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.return-card-fields .form-group{
    margin-bottom:0;
}

.return-card-fields label{
    font-size:11.5px;
}