*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

body{
  display:flex;
  min-height:100vh;
  background:#f5f7fb;
}
.chart-card{

  margin-top:25px;

  background:white;

  padding:20px;

  border-radius:12px;

  box-shadow:
    0 2px 10px rgba(0,0,0,0.1);

}
.chart-card{

  padding:30px !important;

}
.chart-card canvas{

  min-height:380px;

}
.chart-card h3{

  margin-bottom:25px;

  font-size:28px;

}
#omsetChart{

  height:350px !important;

}
.dashboard-subtitle{

  color:#1976d2;

  font-size:20px;

  font-weight:bold;

  margin-top:5px;

  margin-bottom:5px;

}

.dashboard-address{

  color:#666;

  font-size:13px;

  line-height:1.6;

  margin-bottom:20px;

}
.dashboard-footer{

  margin-top:25px;

  background:white;

  padding:25px;

  border-radius:12px;

  text-align:center;

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

}

.footer-title{

  color:#1976d2;

  font-size:22px;

  font-weight:bold;

  margin-bottom:10px;

}

.footer-address{

  color:#666;

  font-size:13px;

  line-height:1.6;

  margin-bottom:10px;

}

.footer-copy{

  color:#999;

  font-size:12px;

}
.footer-title{

  font-size:36px;

  font-weight:700;

  color:#1976d2;

}

.footer-address{

  margin-top:10px;

  color:#666;

}

.footer-copy{

  margin-top:10px;

  color:#999;

}
.logo-container{

  text-align:center;

  margin-bottom:25px;

  padding:10px;

}

.sidebar-logo{

  width:220px;

  max-width:100%;

  display:block;

  margin:0 auto;

}
.sidebar{

  width:340px;
transition:.3s;
  background:#1976d2;

  padding:20px;

  position:fixed;

  left:0;

  top:0;

  height:100vh;

  overflow-y:auto;

  display:flex;

  flex-direction:column;

  align-items:center;

}
.sidebar.hide{

  transform:translateX(-100%);

}

@media(max-width:768px){

  .content{

    margin-left:0 !important;

    width:100% !important;

    padding:15px !important;

  }

}
.logo-preview{

  max-width:250px;
  max-height:140px;

}
#logoFile{

  width:auto !important;

}
.settings-card{

  background:white;

  padding:25px;

  border-radius:12px;

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

}

.content.full{
  margin-left:0 !important;
  width:100% !important;
}

.content{

  transition:.3s;

}
.floating-toggle{

  position:fixed;

  left:15px;
  top:15px;

  width:50px;
  height:50px;

  border:none;
  border-radius:10px;

  background:white;

  font-size:22px;

  cursor:pointer;

  z-index:9999999;

}
.toggle-btn{

  width:45px;

  height:45px;

  border:none;

  border-radius:10px;

  background:white;

  font-size:22px;

  cursor:pointer;

  font-weight:bold;

}

.sidebar-top{

  display:flex;

  justify-content:flex-start;

  margin-bottom:15px;

}
.sidebar.hide{

  transform:translateX(-100%);

}

.logo{
  color:white;
  font-size:22px;
  font-weight:bold;
  margin-bottom:30px;
}

.sidebar button{

  width:260px;

  border:none;

  background:white;

  margin-bottom:12px;

  padding:15px;

  cursor:pointer;

  border-radius:10px;

  font-size:16px;

  font-weight:bold;

}
.sidebar-header{

    display:flex;
    justify-content:flex-end;
    margin-bottom:15px;

}

.close-sidebar{

    width:45px !important;
    min-width:45px !important;

    height:45px;

    padding:0;

    margin:0;

    border:none;

    border-radius:10px;

    background:#fff;

    color:#1976d2;

    font-size:28px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}
.dashboard-wrapper{

  width:100%;

  max-width:1500px;

}
#dashboardPage,
#invoicePage,
#dataInvoicePage,
#pengaturanPage{
  width:100%;
}
.content{
  display:block;
  position:relative;

  flex:1;

  padding:30px;

  margin-left:340px;

  width:calc(100% - 340px);

  min-height:100vh;

  overflow:auto;
}

.card{
  background:white;
  padding:20px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
  margin-bottom:20px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  margin-bottom:5px;
  font-weight:bold;
}

.form-group input{
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
}

.invoice-table{
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
}

.invoice-table th,
.invoice-table td{
  border:1px solid #ddd;
  padding:10px;
}

.invoice-table input{
  width:100%;
  padding:8px;
}

.btn-primary,
.btn-success{
  margin-top:15px;
  border:none;
  padding:12px 20px;
  border-radius:8px;
  cursor:pointer;
}

.btn-primary{
  background:#1976d2;
  color:white;
}

.btn-success{
  background:#2e7d32;
  color:white;
  margin-left:10px;
}

.grand-total{
  margin-top:20px;
  font-size:24px;
  font-weight:bold;
}

@media(max-width:768px){

  .sidebar{

    width:280px;

    left:0;

    top:0;

    height:100vh;

    z-index:99998;

    transform:translateX(-100%);

  }

  .sidebar.show{

    transform:translateX(0);

  }

}
/* ======================
   GLOBAL LOADING
====================== */

#globalLoading{

  position:fixed;

  top:0;
  left:0;
  right:0;
  bottom:0;

  background:
    rgba(0,0,0,0.45);

  display:flex;

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

  z-index:99999;

}

.loading-box{

  background:white;

  padding:30px;

  min-width:250px;

  border-radius:12px;

  text-align:center;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,0.2);

}

.loading-spinner{

  width:45px;
  height:45px;

  border:4px solid #ddd;

  border-top:
    4px solid #1976d2;

  border-radius:50%;

  margin:0 auto 15px;

  animation:
    spin 1s linear infinite;

}

.loading-text{

  font-size:16px;

  font-weight:bold;

  color:#333;

}

@keyframes spin{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}
/* ======================
   GLOBAL TOAST
====================== */

.global-toast{

  position:fixed;

  bottom:25px;
  right:25px;

  padding:14px 20px;

  border-radius:10px;

  color:white;

  font-weight:bold;

  z-index:100000;

  opacity:0;

  transform:
    translateY(20px);

  transition:all .3s;

}

.global-toast.show{

  opacity:1;

  transform:
    translateY(0);

}

.toast-success{
  background:#2e7d32;
}

.toast-error{
  background:#d32f2f;
}

.toast-warning{
  background:#f57c00;
}
.page-content{
  display:block;
  width:100%;
  min-height:500px;
  padding:30px;
}
/* ======================
   PENGATURAN
====================== */

.settings-card{
  background:#fff;
  padding:30px;
  border-radius:15px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.settings-card h3{
  margin-bottom:15px;
}

.form-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-weight:bold;
  margin-bottom:6px;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

.form-group textarea{
  min-height:90px;
  resize:vertical;
}

.logo-preview-box{
  display:inline-block;
  padding:10px;
  border:2px dashed #dbe4f0;
  border-radius:12px;
}
.logo-preview{

  max-width:180px;
  max-height:70px;

  width:auto;
  height:auto;

  object-fit:contain;

}

#logoFile{
  width:auto !important;
}

.btn-upload{
  margin-top:15px;
}

.btn-save{
  margin-top:25px;
  min-width:220px;
}
#setAlamat{
  min-height:60px;
}
.setting-action{
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:20px;
  flex-wrap:wrap;
}
#logoFile{
  margin-top:10px;
}
/* ======================
   SEARCH INVOICE
====================== */

.search-box{

  display:flex;

  align-items:center;

  gap:10px;

  background:#fff;

  border:1px solid #ddd;

  border-radius:10px;

  padding:12px 15px;

  margin-top:15px;

  margin-bottom:15px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.05);

}

.search-box span{

  font-size:18px;

}

.search-box input{

  width:100%;

  border:none;

  outline:none;

  background:transparent;

  font-size:14px;

}

.search-box input::placeholder{

  color:#999;

}
/* ======================
   DATA INVOICE BESAR
====================== */

#dataInvoicePage{

  width:100%;

}

#dataInvoicePage h2{

  font-size:32px;

  margin-bottom:20px;

}

#dataInvoicePage .invoice-table{

  font-size:16px;

}

#dataInvoicePage .invoice-table th{

  padding:16px;

  font-size:16px;

}

#dataInvoicePage .invoice-table td{

  padding:16px;

  font-size:15px;

  vertical-align:middle;

}

/* tombol aksi */

#dataInvoicePage button{

  padding:12px 18px;

  font-size:15px;

  font-weight:bold;

  border-radius:8px;

  min-width:100px;

  margin:3px;

}

/* search lebih besar */

#dataInvoicePage .search-box{

  padding:15px 18px;

}

#dataInvoicePage .search-box input{

  font-size:16px;

}

/* desktop */

@media(min-width:1200px){

  #dataInvoicePage .invoice-table{

    font-size:17px;

  }

  #dataInvoicePage .invoice-table th{

    font-size:17px;

  }

  #dataInvoicePage .invoice-table td{

    font-size:16px;

  }

}
/* ======================
   DATA INVOICE PRO
====================== */

#dataInvoicePage{

  width:100%;

}

#dataInvoicePage h2{

  font-size:34px;

  margin-bottom:20px;

  color:#1976d2;

}

#dataInvoicePage .search-box{

  padding:18px 20px;

  margin-bottom:20px;

}

#dataInvoicePage .search-box input{

  font-size:17px;

}

#dataInvoicePage .invoice-table{

  width:100%;

  font-size:17px;

  background:white;

  border-radius:12px;

  overflow:visible;

}

#dataInvoicePage .invoice-table th{

  background:#1976d2;

  color:white;

  padding:18px;

  font-size:17px;

  text-align:center;

}

#dataInvoicePage .invoice-table td{

  padding:18px;

  font-size:16px;

  text-align:center;

  vertical-align:middle;

}

#dataInvoicePage .invoice-table tr:hover{

  background:#f5f9ff;

}

/* KOLOM AKSI */

#dataInvoicePage .invoice-table td:last-child{

  min-width:150px;

}
/* TOMBOL AKSI */

#dataInvoicePage .invoice-table button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-width:130px;

  height:48px;

  padding:0 15px;

  margin:4px;

  border:none;

  border-radius:10px;

  cursor:pointer;

  font-size:14px;

  font-weight:600;

  transition:.2s;

  background:#1976d2;

  color:white;

  white-space:nowrap;

}
#dataInvoicePage .invoice-table button:hover{

  transform:scale(1.08);

}

/* DESKTOP BESAR */

@media(min-width:1200px){

  #dataInvoicePage .invoice-table th{

    font-size:18px;

    padding:20px;

  }

  #dataInvoicePage .invoice-table td{

    font-size:17px;

    padding:20px;

  }

  #dataInvoicePage .invoice-table button{

  min-width:140px;

  height:52px;

  font-size:15px;

}
}
/* =========================
   RAFI SABLON PRO UI
========================= */

/* Judul halaman */

h2{

  font-size:34px !important;

  margin-bottom:20px;

  color:#1976d2;

}

/* Card Dashboard */

.card{

  padding:30px !important;

  border-radius:16px;

}

.card h3{

  font-size:20px;

}

.card div{

  font-size:18px;

}

/* Form */

.form-group label{

  font-size:16px;

  font-weight:bold;

}

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

  padding:14px !important;

  font-size:16px !important;

  border-radius:10px;

}

/* Tombol utama */

.btn-primary,
.btn-success{

  padding:15px 25px !important;

  font-size:16px !important;

  font-weight:bold;

  border-radius:10px;

}

/* Semua tombol */
button{

  transition:.2s;

}

button:hover{

  transform:translateY(-2px);

}
button{

  font-size:15px;

}

/* Sidebar */

.sidebar button{

  width:280px;

  padding:18px;

  font-size:17px;

}
.sidebar button{

  transition:.25s;

}

.sidebar button:hover{

  transform:translateX(5px);

}
.sidebar button.active{

  background:#fff;

  color:#1976d2;

  font-weight:700;

  border-left:5px solid #1976d2;

}
.logo-container{

  padding-bottom:25px;

  border-bottom:
    1px solid rgba(255,255,255,.15);

}
.sidebar-version{

  margin-top:auto;

  text-align:center;

  color:rgba(255,255,255,.6);

  font-size:12px;

}
.sidebar button.active{

  background:#fff;

  color:#1976d2;

  font-weight:700;

  border-left:
    5px solid #1976d2;

}
/* Dashboard Card Container */

.card-container{

  gap:25px;

}

/* Grand Total */

.grand-total{

  font-size:32px;

  color:#1976d2;

}

/* Invoice Input Table */

#itemTableBody td{

  padding:12px;

}

#itemTableBody input{

  padding:12px;

  font-size:15px;

}

/* Pengaturan */

.settings-card{

  padding:35px;

}

.settings-card h3{

  font-size:24px;

}

/* Search Box */

.search-box{

  padding:18px !important;

}

.search-box input{

  font-size:16px !important;

}

/* Desktop Lebar */

@media(min-width:1200px){

  .content{

    padding:40px;

  }

  h2{

    font-size:38px !important;

  }

  .form-group input,
  .form-group textarea{

    font-size:17px !important;

  }

  .btn-primary,
  .btn-success{

    font-size:17px !important;

  }

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

.pagination{

  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:25px;

  flex-wrap:wrap;

}

.pagination button{

  min-width:45px;

  height:45px;

  border:none;

  border-radius:10px;

  background:#e3f2fd;

  color:#1976d2;

  font-weight:bold;

  cursor:pointer;

}

.pagination button.active{

  background:#1976d2;

  color:white;

}

.pagination button:hover{

  transform:scale(1.05);

}
/* ======================
   DETAIL MODAL
====================== */

.detail-modal{

  display:none;

  position:fixed;

  top:0;
  left:0;
  right:0;
  bottom:0;

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

  z-index:999999;

  justify-content:center;

  align-items:center;

}

.detail-modal-content{

  background:white;

  width:90%;

  max-width:700px;

  border-radius:15px;

  overflow:hidden;

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

}

.detail-modal-header{
padding:18px 25px;
  background:#1976d2;

  color:white;

  padding:15px 20px;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.detail-modal-header h3{

  margin:0;

}

.detail-modal-header button{

  border:none;

  background:none;

  color:white;

  font-size:22px;

  cursor:pointer;

}
.detail-modal-header button{
  width:auto !important;
  min-width:auto !important;
  margin:0;
}

#detailContent{

  padding:20px;

  max-height:500px;

  overflow-y:auto;

}

.detail-item{

  background:#f8fbff;

  border-left:5px solid #1976d2;

  border-radius:10px;

  padding:18px;

  margin-bottom:15px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.05);

}
.detail-item h4{

  color:#1976d2;

  font-size:18px;

  margin-bottom:12px;

}
.detail-row{

  padding:6px 0;

  border-bottom:1px solid #eee;

  font-size:15px;

}
.detail-modal-content{

  animation:modalPop .25s ease;

}
@keyframes modalPop{

  from{

    opacity:0;

    transform:
      translateY(20px)
      scale(.95);

  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);

  }

}
.filter-box{

  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  background:#fff;

  padding:20px;

  border-radius:15px;

  box-shadow:
    0 2px 10px rgba(0,0,0,.05);

  margin-bottom:20px;

}

.filter-box input{

  height:46px;

  padding:0 12px;

  border:1px solid #ddd;

  border-radius:10px;

  font-size:14px;

}

.filter-box button{

  height:46px;

  min-width:120px;

  border:none;

  border-radius:10px;

  font-weight:600;

  cursor:pointer;

  transition:.2s;

}

.filter-box button:hover{

  transform:translateY(-2px);

}
.btnExportExcel{

  background:#2e7d32 !important;

  color:white !important;

  min-width:160px;

  font-weight:700;

}
.page-header{

  margin-bottom:20px;

}

.page-header h2{

  margin:0;

  font-size:48px;

  font-weight:700;

  color:#1976d2;

}

.page-header p{

  margin-top:8px;

  color:#666;

  font-size:15px;

}
/* ======================
   DROPDOWN AKSI
====================== */

.aksi-dropdown{

    position:relative;

    display:inline-block;

    margin-left:auto;

}

.aksi-btn{

  background:#1976d2;

  color:#fff;

  border:none;

  border-radius:10px;

  min-width:120px;

  height:44px;

  cursor:pointer;

  font-weight:600;

}

.aksi-menu{

  display:none;

  position:absolute;

  top:50px;

  right:0;

  left:auto;

  width:200px;

  background:#fff;

  border-radius:10px;

  overflow:hidden;

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

  z-index:9999;

}
.aksi-btn.mobile{

    width:42px !important;

    min-width:42px !important;

    height:42px;

    padding:0;

    border-radius:10px;

    font-size:22px;

    font-weight:bold;

}
.aksi-dropdown.active .aksi-menu{

  display:block;

}

.aksi-menu button{

  width:100% !important;

  display:block;

  background:#fff !important;

  color:#333 !important;

  border:none !important;

  border-radius:0 !important;

  text-align:left;

  padding:12px 15px !important;

  margin:0 !important;

  min-width:100% !important;

}

.aksi-menu button:hover{

  background:#f5f7fb !important;

}
/* ======================
   DASHBOARD CARD PRO
====================== */

.dashboard-card{

  text-align:center;

  padding:35px 25px !important;

  min-height:180px;

  display:flex;

  flex-direction:column;

  justify-content:center;

}

.dashboard-card{

  cursor:pointer;

}

.dashboard-card:hover{

  transform:
    translateY(-6px);

  box-shadow:
    0 15px 35px
    rgba(25,118,210,.15);

}

.card-icon{

  font-size:40px;

  margin-bottom:12px;

}

.card-title{

  font-size:16px;

  color:#666;

  margin-bottom:15px;

  font-weight:600;

}

.card-value{

  font-size:42px;

  font-weight:700;

  color:#1976d2;

  margin-top:10px;

  line-height:1.2;

  word-break:break-word;

}
.dashboard-wrapper h1{

  margin-bottom:5px;

  font-size:48px;

  font-weight:700;

}

.dashboard-subtitle{

  color:#666;

  font-size:18px;

  margin-bottom:25px;

}
.table-wrapper{
  overflow-x:auto;
}
@media(max-width:768px){

  .dashboard-card{

    min-height:auto;

    padding:25px 20px !important;

  }

  .card-icon{

    font-size:34px;

    margin-bottom:10px;

  }

  .card-title{

    font-size:14px;

  }

  .card-value{

    font-size:28px;

  }

}
/* ======================
   MOBILE DATA INVOICE
====================== */

@media(max-width:768px){

  .filter-box{

    flex-direction:column;

    align-items:stretch;

  }

  .filter-box label{

    margin-bottom:-5px;

  }

  .filter-box input{

    width:100%;

  }

  .filter-box button{

    width:100%;

    margin:0;

  }

}
@media(max-width:768px){

  .search-box{

    height:auto;

    padding:15px;

  }

  .search-box input{

    font-size:16px;

  }

}
@media(max-width:768px){

  .dashboard-wrapper h1{
    font-size:34px;
  }

  .page-header h2{
    font-size:32px !important;
  }

  .card-value{
    font-size:32px;
  }

  .chart-card canvas{
    min-height:220px;
  }

  .chart-card{
    padding:20px !important;
  }

  .chart-card h3{
    font-size:20px;
    margin-bottom:15px;
  }

 #omsetChart{
  height:250px !important;
}

}

@media(max-width:768px){

  .detail-modal{

    padding:15px;

  }

  .detail-modal-content{

    width:100%;

    max-width:none;

    max-height:85vh;

    overflow-y:auto;

  }

}
.detail-modal.show{

  display:flex !important;

}
/* ======================
   MOBILE CARD INVOICE
====================== */

.invoice-card-list{
  display:none;
}

.invoice-card{
  background:#fff;
  border-radius:15px;
  padding:18px;
  margin-bottom:15px;
  box-shadow:
    0 2px 10px rgba(0,0,0,.08);
}

.invoice-card-header{
  font-size:16px;
  font-weight:700;
  color:#1976d2;
  margin-bottom:12px;
}

.invoice-card-row{
  margin-bottom:8px;
  font-size:14px;
}

.invoice-card-label{
  font-weight:700;
}

@media(max-width:768px){

  .table-wrapper{
    display:none;
  }

  .invoice-card-list{
    display:block;
  }

}
.invoice-card-action{

    display:flex;

    justify-content:flex-end;

    margin-top:15px;

}

.invoice-card-action .aksi-btn{

    width:auto;

    min-width:120px;

}
@media(max-width:768px){

  .pagination{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:20px;

    margin-bottom:20px;

  }

}
.empty-state{

  background:white;

  padding:50px 30px;

  border-radius:15px;

  text-align:center;

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

}

.empty-state-icon{

  font-size:60px;

  margin-bottom:15px;

}

.empty-state-title{

  font-size:22px;

  font-weight:700;

  color:#1976d2;

  margin-bottom:10px;

}

.empty-state-desc{

  color:#666;

  font-size:14px;

}
@media(max-width:768px){

  .dashboard-wrapper h1{

    font-size:30px;

    text-align:center;

  }

  .dashboard-subtitle{

    text-align:center;

    font-size:15px;

  }

}
@media(max-width:768px){

  .dashboard-footer{

    padding:20px;

  }

  .footer-title{

    font-size:22px;

  }

  .footer-address{

    font-size:12px;

  }

  .footer-copy{

    font-size:11px;

  }

}
#dashboardPage,
#invoicePage,
#dataInvoicePage,
#pengaturanPage{
  width:100%;
  min-height:500px;
}
#sidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:9998;
}

#sidebarOverlay.show{
  display:block;
}
.sidebar-header{

  display:none;

}

.close-sidebar{

  width:45px;

  height:45px;

  border:none;

  border-radius:10px;

  background:white;

  color:#1976d2;

  font-size:24px;

  font-weight:bold;

  cursor:pointer;

}
@media(max-width:768px){

  .sidebar-header{

    display:flex;

    justify-content:flex-end;

    margin-bottom:15px;

  }

}
/* ==========================================
   MOBILE INVOICE FORM
========================================== */

@media (max-width:768px){

  /* Sembunyikan header tabel */
  .invoice-table thead{
    display:none;
  }

  .invoice-table,
  .invoice-table tbody,
  .invoice-table tr,
  .invoice-table td{
    display:block;
    width:100%;
    border:none;
  }

  /* Card tiap barang */
  #itemTableBody tr{

    background:#fff;

    border-radius:16px;

    padding:18px;

    margin-bottom:18px;

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

  }

  /* reset td */

  #itemTableBody td{

    padding:0 !important;

    margin-bottom:15px;

  }

  /* Label */

  .barang-cell::before{

    content:"Nama Barang";

    display:block;

    font-weight:bold;

    margin-bottom:8px;

    color:#555;

  }

  .qty-cell::before{

    content:"Qty";

    display:block;

    font-weight:bold;

    margin-bottom:8px;

    color:#555;

  }

  .harga-cell::before{

    content:"Harga";

    display:block;

    font-weight:bold;

    margin-bottom:8px;

    color:#555;

  }

  /* Input */

  .barang-cell input{

    width:100%;

  }

  .qty-cell,
  .harga-cell{

    display:inline-block;

    width:48%;

    vertical-align:top;

  }

  .qty-cell{

    margin-right:4%;

  }

  .qty-cell input,
  .harga-cell input{

    width:100%;

  }

  /* Subtotal */

  .subtotal-cell{

    border-top:1px dashed #ddd;

    padding-top:12px !important;

    font-size:22px;

    font-weight:bold;

    color:#1976d2;

  }

  .subtotal-cell::before{

    content:"Subtotal";

    display:block;

    margin-bottom:6px;

    font-size:14px;

    color:#666;

  }

  /* Tombol hapus */

  .aksi-cell{

    text-align:right;

    border-top:1px solid #eee;

    padding-top:15px !important;

  }

  .btn-hapus{

    background:#d32f2f;

    color:#fff;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

  }

  /* Tombol bawah */

  .btn-primary,
  .btn-success{

    width:100%;

    margin-left:0;

  }

  /* Grand total */

  .grand-total{

    margin-top:25px;

    padding:20px;

    border-radius:15px;

    background:#f8fbff;

    text-align:center;

    font-size:30px;

  }

}