:root{
  --bg:#edf2f6;
  --card:#ffffff;
  --surface-soft:#f8fafc;
  --surface-muted:#eef3f6;
  --line:#cbd8e1;
  --line-soft:#e3e9ed;
  --txt:#1f2937;
  --muted:#64748b;
  --pri:#007b8a;
  --pri-dark:#006874;
  --pri-soft:#e8f4f5;
  --good:#15803d;
  --warning:#d97706;
  --danger:#dc2626;
  --info:#0369a1;
  --radius:12px;
  --shadow:0 4px 14px rgba(15,23,42,.07);
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
}
body.modal-open{overflow:hidden}
a{color:var(--pri)}

/* =====================================================
   LAYOUT UTAMA
   ===================================================== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:240px;
  background:#fff;
  border-right:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  transition:width .18s,left .18s;
}
.sidebar.collapsed{width:64px}
.brand{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px}
.brand-link{font-weight:700;color:#111;text-decoration:none}
.toggle{border:0;background:#f0f2f5;border-radius:8px;padding:6px 10px;cursor:pointer}
.menu{padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.menu-label{font-size:12px;color:var(--muted);padding:8px 10px 4px}
.nav-link{
  padding:10px 12px;
  border-radius:10px;
  color:#111827;
  text-decoration:none;
  display:block;
  transition:background .15s,color .15s;
}
.nav-link:hover{background:#f1f5f9}
.nav-link.active{background:var(--pri-soft);color:var(--pri-dark);font-weight:600}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--line-soft)}
.user-name{font-size:14px;font-weight:600}
.user-role{font-size:12px;color:var(--muted)}
.logout{
  display:inline-block;
  margin-top:8px;
  background:#fff1f2;
  color:#b42318;
  border:1px solid #fecdd3;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
}
.logout:hover{background:#ffe4e6}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  z-index:5;
}
.page-title{font-weight:700}
.user-mini{font-size:13px;color:var(--muted)}
.page-wrap{padding:16px;max-width:1440px;margin:0 auto;width:100%;min-width:0}
.footer{border-top:1px solid var(--line-soft);padding:12px 16px;text-align:center;font-size:13px;color:var(--muted)}

.menu-group{margin-top:4px}
.menu-group-header{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:inherit;
  color:inherit;
}
.menu-group-header:hover{background:#f1f5f9}
.menu-group .caret{font-size:10px}
.menu-group .submenu{display:none;padding-left:10px;margin-top:2px}
.menu-group.open .submenu{display:block}
.nav-link.sub{font-size:13px;padding:8px 12px 8px 24px}

/* =====================================================
   KARTU, HEADER HALAMAN, GRID
   ===================================================== */
.card,
.form-box,
.app-card,
.card-body{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:13px;
  padding:16px;
  box-shadow:var(--shadow);
}
.card + .card,.form-box + .card,.card + .form-box{margin-top:14px}
.card h1,.card h2,.card h3,.card h4,
.form-box h1,.form-box h2,.form-box h3,.form-box h4,
.form-title{
  color:var(--pri);
}
.card h3,.form-box h3{margin-top:0}
.page-card-header,
.card-header,
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.page-card-header h3,.page-card-header h4{margin:0}
.page-card-subtitle{margin:3px 0 0}
.grid-2{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.muted{color:var(--muted);font-size:12px}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-left{text-align:left!important}

/* =====================================================
   FORM
   ===================================================== */
label{font-size:13px;font-weight:500;margin-bottom:6px;display:block;color:#334155}
input[type=text],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=number],
input[type=password],
input[type=tel],
select,
textarea,
.form-control{
  width:100%;
  min-height:40px;
  padding:9px 10px;
  border:1px solid #c7d4dd;
  border-radius:9px;
  font:inherit;
  color:var(--txt);
  background:#fff;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
textarea{min-height:82px;resize:vertical}
input:focus,select:focus,textarea:focus,.form-control:focus{
  outline:none;
  border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(0,123,138,.12);
}
input:disabled,select:disabled,textarea:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--pri)}
.input-error{border-color:#ef4444!important;background:#fef2f2!important;box-shadow:0 0 0 1px #fecaca!important}
.error-text{color:#dc2626;font-size:12px;margin-top:3px;display:block}

/* =====================================================
   TOMBOL
   ===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:9px 14px;
  border:1px solid var(--pri);
  border-radius:9px;
  background:var(--pri);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:filter .15s,background .15s,border-color .15s;
}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.secondary{background:#e7edf1;color:#334155;border-color:#c7d4dd}
.btn.outline{background:#fff;color:var(--pri);border-color:var(--pri)}
.aksi-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.btn-icon,
.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:0;
  border-radius:8px;
  border:1px solid transparent;
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  font-size:16px;
  line-height:1;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.btn-icon i,.action-btn i{font-size:16px;line-height:1}
.btn-icon:hover,.action-btn:hover{filter:brightness(.95)}
.btn-icon:disabled{opacity:.45;cursor:not-allowed}
.btn-outline-primary,.action-blue{border-color:#3b82f6;color:#2563eb;background:#fff}
.btn-outline-success{border-color:#22a447;color:#15803d;background:#fff}
.btn-outline-warning,.action-yellow{border-color:#f59e0b;color:#d97706;background:#fff}
.btn-outline-orange,.action-orange{border-color:#fb923c;color:#ea580c;background:#fff}
.btn-outline-danger,.action-red{border-color:#ef4444;color:#dc2626;background:#fff}
.btn-outline-info{border-color:#0ea5b7;color:#087c8a;background:#fff}
.btn-outline-history{border-color:#64748b;color:#475569;background:#fff}
.btn-circle-plus,.btn-circle-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--pri);
  border-radius:999px;
  background:var(--pri);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-size:20px;
  line-height:1;
}

/* =====================================================
   TABEL
   ===================================================== */
.table-scroll,
.table-wrap,
div[style*="overflow:auto"],
div[style*="overflow: auto"]{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-scroll,.table-wrap{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.table,
.report-table,
.mini-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
}
.table th,.table td,
.report-table th,.report-table td,
.mini-table th,.mini-table td{
  padding:9px 10px;
  border-right:1px solid #edf1f4;
  border-bottom:1px solid #dce4e9;
  font-size:13px;
  text-align:left;
  vertical-align:middle;
}
.table thead th,
.report-table thead th,
.mini-table thead th{
  background:var(--pri);
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
.table thead tr:first-child th:first-child,
.report-table thead tr:first-child th:first-child{border-top-left-radius:9px}
.table thead tr:first-child th:last-child,
.report-table thead tr:first-child th:last-child{border-top-right-radius:9px}
.table tbody tr:nth-child(even),.report-table tbody tr:nth-child(even){background:#f8fafc}
.table tbody tr:hover,.report-table tbody tr:hover{background:#f0f8f9}
.table tbody tr:last-child td,.report-table tbody tr:last-child td{border-bottom:0}
.table th:last-child,.table td:last-child,.report-table th:last-child,.report-table td:last-child{border-right:0}
.table tfoot th,.table tfoot td,.report-table tfoot th,.report-table tfoot td{background:#eaf2f5;font-weight:700;color:#173f47}
.access-grid input[type=checkbox]{width:18px;height:18px;cursor:pointer}
.access-grid td:first-child{min-width:190px}
.access-grid td:nth-child(2){min-width:300px;white-space:normal}

/* =====================================================
   STATUS, ALERT, RINGKASAN
   ===================================================== */
.badge{display:inline-block;background:#eef2ff;color:#3730a3;padding:3px 8px;border-radius:999px;font-size:12px}
.status{padding:4px 8px;border-radius:999px;font-size:12px;display:inline-block;white-space:nowrap}
.s-aktif{background:#e0f2fe;color:#075985}
.s-selesai{background:#dcfce7;color:#166534}
.s-batal{background:#fee2e2;color:#991b1b}
.alert{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:12px}
.summary-box,.info-box,.filter-box{border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);padding:12px}

/* =====================================================
   MODAL GLOBAL
   ===================================================== */
.modal-overlay,.modal-backdrop-custom,.history-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal-overlay.show,.modal-backdrop-custom.show,.history-modal.show{display:flex}
.modal-overlay::before,.modal-backdrop-custom::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
}
.modal-inner,.modal-dialog-custom,.history-modal-dialog{
  position:relative;
  z-index:1;
  width:min(720px,100%);
  max-height:90vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 55px rgba(15,23,42,.25);
}
.modal-header-custom,.history-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--line-soft);
}
.modal-header-custom h3,.history-modal-header h3{margin:0;color:var(--pri)}
.modal-body-custom,.history-modal-body{padding:16px}
.history-modal{z-index:12000}
.history-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52)}
.history-modal-dialog{width:min(860px,100%)}
.history-loading,.history-empty{padding:28px;text-align:center;color:var(--muted)}
.history-entry{border:1px solid var(--line);border-radius:11px;background:#fff;margin-bottom:12px;overflow:hidden}
.history-entry:last-child{margin-bottom:0}
.history-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;background:#f8fafc;border-bottom:1px solid var(--line-soft)}
.history-action{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.4px}
.history-action-insert{background:#dcfce7;color:#166534}
.history-action-update{background:#dbeafe;color:#1d4ed8}
.history-action-delete{background:#fee2e2;color:#991b1b}
.history-change-list{padding:4px 14px 12px}
.history-change-row{display:grid;grid-template-columns:minmax(140px,.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid #eef2f6}
.history-change-row:last-child{border-bottom:0}
.history-field{font-weight:600;color:#334155}
.history-before,.history-after{padding:7px 9px;border-radius:7px;overflow-wrap:anywhere;white-space:normal}
.history-before{background:#fff1f2;color:#9f1239}
.history-after{background:#ecfdf5;color:#166534}

/* KOP DOKUMEN */
.kop{text-align:center;margin-bottom:20px}
.kop-logo{max-height:60px;display:block;margin:0 auto 8px}
.kop-nama{font-size:18px;font-weight:700;color:var(--pri)}
.kop-sub{font-size:12px;color:#555}
option.opt-add{background:#ffe5e5;color:#c40000;font-weight:700}

/* =====================================================
   RESPONSIVE UMUM
   ===================================================== */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-wrap{padding:12px}
}
@media (max-width:768px){
  body{background:#e8eef3}
  .page-wrap{padding:10px}
  .card,.form-box,.app-card{padding:12px;border-color:#b8c8d2;box-shadow:0 5px 15px rgba(15,23,42,.10)}
  .row,.grid-4{grid-template-columns:1fr}
  .page-card-header,.card-header,.toolbar{align-items:flex-start;flex-wrap:wrap}
  .user-mini{display:none}
  .history-modal{padding:10px}
  .history-modal-dialog{max-height:94vh}
  .history-change-row{grid-template-columns:1fr}
  .history-field{padding-top:4px}
}

/* =====================================================
   MODUL KONTRAK DAN TURUNANNYA
   ===================================================== */
/* Responsif bersama untuk halaman interaktif turunan menu Kontrak. */

/* ===== Identitas visual bersama modul Kontrak ===== */
.kontrak-list-card,
.form-box.kontrak-form-card,
.kontrak-detail-card,
.pengangkutan-contract-card,
.contract-transaction-card,
.investor-contract-summary,
.investor-list-card,
.investor-history-card{
  border:1px solid #c8d5de !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(15,23,42,.07) !important;
}

.kontrak-list-card h3,
.form-box.kontrak-form-card h3,
.kontrak-detail-card > div:first-child h3,
.pengangkutan-contract-card h3,
.contract-transaction-card h3,
.investor-contract-summary h3,
.investor-list-card h3,
.investor-history-card h3{
  color:#007987 !important;
}

.contract-group-head th{
  padding:8px 10px !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.30) !important;
  background:#0f8c99 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-align:center !important;
  vertical-align:middle !important;
  letter-spacing:.15px;
}

.contract-group-head th:first-child{
  border-top-left-radius:9px;
}

.contract-group-head .contract-action-head{
  border-top-right-radius:9px;
}

.contract-column-head th{
  padding:8px 9px !important;
  border:0 !important;
  border-right:1px solid #d6e1e7 !important;
  border-bottom:1px solid #c4d2da !important;
  background:#eaf2f5 !important;
  color:#334155 !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* Daftar Kontrak */
.kontrak-table-wrap{
  border:1px solid #cbd8e1;
  border-radius:11px;
  background:#fff;
}

.kontrak-table{
  width:100%;
  min-width:850px;
  margin:0 !important;
  border-collapse:separate;
  border-spacing:0;
}

.kontrak-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.kontrak-table tbody tr:hover{
  background:#f0f8f9;
}

.kontrak-table tbody td{
  padding:10px 9px !important;
  border:0 !important;
  border-right:1px solid #edf1f4 !important;
  border-bottom:1px solid #dce4e9 !important;
  vertical-align:middle;
}

.kontrak-table tbody td:nth-child(1),
.kontrak-table tbody td:nth-child(4),
.kontrak-table tbody td:nth-child(5),
.kontrak-table tbody td:nth-child(6){
  text-align:center;
}

.kontrak-table tbody td:nth-child(2),
.kontrak-table tbody td:nth-child(3){
  font-weight:600;
}

.kontrak-table .aksi-group{
  justify-content:center;
}

/* Form Kontrak */
.form-box.kontrak-form-card{
  padding:20px !important;
}

.form-box.kontrak-form-card > div:first-child{
  padding-bottom:12px;
  border-bottom:1px solid #dbe4ea;
}

.form-box.kontrak-form-card input[type="text"],
.form-box.kontrak-form-card input[type="date"],
.form-box.kontrak-form-card select,
.form-box.kontrak-form-card textarea{
  border-color:#c7d4dd !important;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}

.form-box.kontrak-form-card input:focus,
.form-box.kontrak-form-card select:focus,
.form-box.kontrak-form-card textarea:focus{
  outline:none;
  border-color:#0f8c99 !important;
  box-shadow:0 0 0 3px rgba(15,140,153,.12);
}

.contract-form-section{
  padding:14px !important;
  border:1px solid #ccd9e1 !important;
  border-radius:11px !important;
  background:#f8fafc !important;
}

.contract-form-driver{
  border-top:1px solid #ccd9e1 !important;
}

.kontrak-rute-table,
.kontrak-gaji-table{
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #cbd8e1 !important;
  border-radius:10px;
  overflow:hidden;
}

.kontrak-rute-table tbody tr:nth-child(even),
.kontrak-gaji-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.kontrak-rute-table tbody td,
.kontrak-gaji-table tbody td{
  padding:8px !important;
  border:0 !important;
  border-right:1px solid #edf1f4 !important;
  border-bottom:1px solid #dce4e9 !important;
  vertical-align:middle;
}

/* Detail Kontrak */
.kontrak-detail-card{
  padding:18px !important;
}

.kontrak-detail-card > div:first-child{
  padding-bottom:12px;
  border-bottom:1px solid #dbe4ea;
}

.contract-detail-actions{
  display:flex;
  align-items:center;
  gap:8px !important;
}

.contract-detail-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px !important;
  border-radius:9px !important;
  font-weight:600;
  text-decoration:none !important;
  box-shadow:0 2px 5px rgba(15,23,42,.08);
}

.contract-detail-actions .contract-back-btn{
  border:1px solid #c4d1da !important;
  background:#eef3f6 !important;
  color:#334155 !important;
}

.contract-detail-actions .contract-edit-btn{
  border:1px solid #0f8c99 !important;
  background:#0f8c99 !important;
  color:#fff !important;
}

.contract-detail-actions .contract-back-btn:hover{
  background:#e2e8ed !important;
}

.contract-detail-actions .contract-edit-btn:hover{
  background:#087986 !important;
}

.kontrak-detail-card .detail-section{
  margin:12px 0 0 !important;
  padding:14px !important;
  border:1px solid #d5e0e7 !important;
  border-radius:11px;
  background:#f8fafc;
}

.kontrak-detail-card .detail-summary-section{
  border-left:4px solid #0f8c99 !important;
  background:#f4f9fa;
}

.kontrak-detail-card .detail-section h4{
  margin-bottom:10px !important;
  color:#007987;
  font-size:15px !important;
}

.kontrak-detail-card .detail-grid{
  gap:0 !important;
  border:1px solid #e0e7ec;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}

.kontrak-detail-card .detail-label,
.kontrak-detail-card .detail-value{
  padding:8px 10px;
  border-bottom:1px solid #edf1f4;
}

.kontrak-detail-card .detail-label{
  background:#eef3f6;
}

.kontrak-detail-card .detail-table{
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

.kontrak-detail-card .detail-table thead th{
  border-color:#0f8c99 !important;
  background:#0f8c99 !important;
  color:#fff !important;
}

.kontrak-detail-card .detail-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.kontrak-detail-card .detail-table tfoot th,
.kontrak-detail-card .detail-table tfoot td{
  background:#eaf2f5 !important;
  color:#173f47;
}

/* Pengangkutan */
.pengangkutan-contract-card{
  padding:17px !important;
}

.pengangkutan-contract-card .pengangkutan-header-meta{
  padding:12px 14px;
  border:1px solid #d8e3e9;
  border-radius:10px;
  background:#f4f8fa;
}

.contract-transaction-card{
  padding:16px !important;
}

.contract-transaction-card .table-wrap{
  border-color:#b9cad4 !important;
  border-radius:10px !important;
  box-shadow:0 2px 7px rgba(15,23,42,.05);
}

/* Investor Kontrak */
.investor-contract-summary,
.investor-list-card,
.investor-history-card{
  padding:16px !important;
}

.investor-contract-summary h3,
.investor-list-card h3,
.investor-history-card h3{
  margin-top:0;
}

.investor-contract-panel{
  padding:15px;
  border:1px solid #ccd9e1;
  border-left:4px solid #0f8c99;
  border-radius:11px;
  background:#f8fafc;
}

.investor-contract-panel > .row{
  padding:9px 10px;
  border:1px solid #dce5ea;
  border-radius:9px;
  background:#fff;
}

.investor-funding-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.investor-funding-summary > div{
  min-width:0;
  margin:0 !important;
  padding:10px 11px;
  border-radius:9px;
  background:#edf3f6;
  color:#475569;
  font-size:12px;
}

.investor-funding-summary > div b{
  display:block;
  margin-top:3px;
  color:#0f172a;
  font-size:14px;
}

.investor-funding-summary .investor-return-summary b{
  color:#075f68;
  white-space:normal;
}

.investor-kontrak-table,
.riwayat-investor-table,
.investor-contract-summary .mini-table{
  width:100%;
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #cbd8e1;
  border-radius:10px;
  overflow:hidden;
}

.investor-kontrak-table tbody tr:nth-child(even),
.riwayat-investor-table tbody tr:nth-child(even),
.investor-contract-summary .mini-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.investor-kontrak-table tbody tr:hover,
.riwayat-investor-table tbody tr:hover{
  background:#f0f8f9;
}

.investor-kontrak-table tbody td,
.riwayat-investor-table tbody td,
.investor-contract-summary .mini-table tbody td{
  padding:9px 8px !important;
  border:0 !important;
  border-right:1px solid #edf1f4 !important;
  border-bottom:1px solid #dce4e9 !important;
  vertical-align:middle;
}

.investor-kontrak-table tbody td:nth-child(2),
.investor-kontrak-table tbody td:nth-child(3),
.investor-kontrak-table tbody td:nth-child(6),
.riwayat-investor-table tbody td:nth-child(3){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.riwayat-investor-table thead th,
.investor-contract-summary .mini-table thead th{
  padding:8px 9px !important;
  border-color:#0f8c99 !important;
  background:#0f8c99 !important;
  color:#fff !important;
  font-size:11px;
  text-align:center;
}

.investor-contract-summary .mini-table tfoot th,
.investor-contract-summary .mini-table tfoot td{
  background:#eaf2f5 !important;
  color:#173f47;
}

.mobile-invoice-contract-summary{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr);
  gap:8px 20px;
  margin:0 0 18px;
  padding:18px;
  border:1px solid #c8d5de;
  border-radius:12px;
  background:#f8fafc;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}

.invoice-contract-table{
  display:none !important;
}

.mobile-contract-top{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1px solid #dbe4ea;
}

.mobile-contract-top > div{
  min-width:0;
}

.mobile-contract-label,
.mobile-contract-flow span,
.mobile-contract-stats span{
  display:block;
  color:#64748b;
  font-size:11px;
  line-height:1.25;
}

.mobile-contract-top strong{
  display:block;
  margin-top:3px;
  color:#007987;
  font-size:19px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.mobile-contract-date{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:#e4eef3;
  color:#334155;
  font-size:12px;
  font-weight:700;
}

.mobile-contract-customer{
  grid-column:1;
  margin-top:7px;
  color:#0f172a;
  font-size:17px;
  font-weight:700;
}

.mobile-contract-job{
  grid-column:1;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}

.mobile-contract-flow{
  grid-column:2;
  grid-row:2 / span 2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:14px;
  border:1px solid #d9e3e9;
  border-radius:10px;
  background:#fff;
}

.mobile-contract-flow > div:last-child{
  text-align:right;
}

.mobile-contract-flow strong{
  display:block;
  margin-top:4px;
  color:#0f172a;
  font-size:15px;
}

.mobile-contract-arrow{
  color:#0f8c99 !important;
  font-size:22px !important;
  font-weight:700;
  text-align:center;
}

.mobile-contract-stats{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:4px;
}

.mobile-contract-stats > div{
  min-width:0;
  padding:10px 12px;
  border-radius:9px;
  background:#e9f0f4;
}

.mobile-contract-stats strong{
  display:block;
  margin-top:3px;
  color:#0f172a;
  font-size:14px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.desktop-invoice-route-details{
  grid-column:1 / -1;
  margin-top:4px;
  padding:12px;
  border:1px solid #d9e3e9;
  border-radius:10px;
  background:#fff;
}

.desktop-route-title{
  margin-bottom:8px;
  color:#007987;
  font-size:13px;
  font-weight:700;
}

.desktop-route-table-wrap{
  overflow-x:auto;
}

.desktop-route-table{
  width:100%;
  min-width:880px;
  border-collapse:collapse;
  font-size:12px;
}

.desktop-route-table th,
.desktop-route-table td{
  padding:8px 10px;
  border-bottom:1px solid #e2e8f0;
  text-align:left;
}

.desktop-route-table th{
  background:#edf4f6;
  color:#334155;
  font-weight:700;
}

.desktop-route-table th:nth-child(n+3),
.desktop-route-table td:nth-child(n+3){
  text-align:right;
}

.invoice-list-wrap{
  overflow-x:auto !important;
  border:1px solid #cbd8e1;
  border-radius:11px;
  background:#fff;
}

.invoice-list-table{
  display:table !important;
  width:100% !important;
  min-width:1100px !important;
  margin:0 !important;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  white-space:nowrap;
}

.invoice-list-table thead{
  display:table-header-group !important;
}

.invoice-list-table .invoice-group-head th{
  padding:8px 9px !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.32) !important;
  background:#0f8c99 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-align:center !important;
  letter-spacing:.15px;
}

.invoice-list-table .invoice-group-head th:first-child{
  border-top-left-radius:10px;
}

.invoice-list-table .invoice-group-head .invoice-action-head{
  border-top-right-radius:10px;
  vertical-align:middle;
}

.invoice-list-table .invoice-column-head th{
  padding:8px 7px !important;
  border:0 !important;
  border-right:1px solid #d6e1e7 !important;
  border-bottom:1px solid #c4d2da !important;
  background:#eaf2f5 !important;
  color:#334155 !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-align:center !important;
}

.invoice-list-table tbody{
  display:table-row-group !important;
}

.invoice-list-table tbody tr{
  display:table-row;
  background:#fff;
}

.invoice-list-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.invoice-list-table tbody tr:hover{
  background:#f0f8f9;
}

.invoice-list-table tbody td{
  display:table-cell !important;
  width:auto !important;
  min-width:0 !important;
  padding:11px 8px !important;
  border:0 !important;
  border-right:1px solid #edf1f4 !important;
  border-bottom:1px solid #dce4e9 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#0f172a;
  font-size:11px !important;
  line-height:1.3;
  vertical-align:middle;
  white-space:nowrap !important;
}

.invoice-list-table tbody td::before{
  display:none;
}

.invoice-list-table tbody td:nth-child(1){
  width:34px !important;
  text-align:center !important;
  color:#64748b;
}

.invoice-list-table tbody td:nth-child(2){
  color:#007987;
  font-weight:700;
}

.invoice-list-table tbody td:nth-child(3),
.invoice-list-table tbody td:nth-child(4),
.invoice-list-table tbody td:nth-child(5){
  text-align:center !important;
}

.invoice-list-table tbody td:nth-child(n+6):nth-child(-n+12){
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}

.invoice-list-table tbody td:nth-child(9){
  background:#e2f5f6 !important;
  color:#075f68;
  font-weight:700;
}

.invoice-list-table tbody td:nth-child(12){
  background:#e8f0fc !important;
  color:#173f75;
  font-weight:700;
}

.invoice-list-table tbody td:nth-child(13){
  width:154px !important;
  text-align:center !important;
}

.invoice-list-table .aksi-group{
  justify-content:center;
  flex-wrap:nowrap;
}

@media (max-width: 1024px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .page-wrap,
  .content,
  .container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
  }

  .container{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .card,
  .form-box,
  .card-body{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  input,
  select,
  textarea,
  button{
    max-width:100%;
    box-sizing:border-box;
  }

  form,
  .detail-table-wrap,
  .table-scroll,
  div[style*="overflow:auto"],
  div[style*="overflow: auto"]{
    max-width:100%;
    -webkit-overflow-scrolling:touch;
  }

  .detail-table-wrap,
  .table-scroll,
  div[style*="overflow:auto"],
  div[style*="overflow: auto"]{
    overflow-x:auto !important;
  }

  .modal-overlay,
  .modal-backdrop{
    padding:16px;
    box-sizing:border-box;
  }

  .modal-inner,
  .modal-dialog{
    width:min(100%, 560px) !important;
    max-width:calc(100vw - 32px) !important;
    max-height:90vh;
    overflow-y:auto;
    box-sizing:border-box;
  }

  .aksi-group{
    flex-wrap:wrap;
  }

  .invoice-list-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

}

@media (max-width: 768px){
  body{
    background:#e8eef3 !important;
  }

  .page-wrap{
    padding:10px !important;
  }

  .card,
  .form-box{
    padding:12px !important;
    border:1px solid #b8c8d2 !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 5px 15px rgba(15,23,42,.11) !important;
  }

  .card + .card{
    margin-top:10px;
  }

  .card-header,
  .card > div[style*="justify-content:space-between"],
  .form-box > div[style*="justify-content:space-between"]{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  h2,
  h3{
    color:#006f7c;
    line-height:1.3;
  }

  h3{
    font-size:18px !important;
  }

  label{
    font-size:13px;
  }

  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="email"],
  select,
  textarea{
    width:100% !important;
    min-width:0 !important;
    min-height:40px;
    font-size:14px !important;
    box-sizing:border-box;
  }

  textarea{
    min-height:82px;
  }

  .btn{
    min-height:36px;
  }

  .btn-icon{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px;
  }

  .aksi-group{
    gap:6px !important;
  }

  .detail-grid{
    grid-template-columns:1fr !important;
    gap:2px !important;
  }

  .detail-label{
    margin-top:7px;
    color:#64748b !important;
    font-size:12px;
  }

  .detail-value{
    padding-bottom:6px;
    border-bottom:1px solid #eef2f6;
  }

  .detail-table-wrap{
    margin-top:6px;
    border:1px solid #cbd5e1;
    border-radius:9px;
    background:#fff;
  }

  .detail-table{
    min-width:680px;
  }

  .mini-table,
  .table:not(.kontrak-rute-table):not(.kontrak-gaji-table){
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mini-table th,
  .mini-table td,
  .table th,
  .table td{
    font-size:12px;
  }

  .modal-overlay,
  .modal-backdrop{
    align-items:flex-end !important;
    padding:0 !important;
  }

  .modal-inner,
  .modal-dialog{
    width:100% !important;
    max-width:100% !important;
    max-height:90vh;
    margin:0 !important;
    padding:14px !important;
    border-radius:16px 16px 0 0 !important;
  }

  .form-box .row,
  .card form .row,
  .modal-dialog .row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .form-box .row > *,
  .card form .row > *,
  .modal-dialog .row > *{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .form-box{
    margin-top:0;
  }

  .kontrak-rute-table,
  .kontrak-rute-table tbody,
  .kontrak-gaji-table,
  .kontrak-gaji-table tbody{
    display:block;
    width:100%;
    min-width:0 !important;
  }

  .kontrak-rute-table thead,
  .kontrak-gaji-table thead{
    display:none;
  }

  .kontrak-rute-table tbody tr,
  .kontrak-gaji-table tbody tr{
    display:block;
    margin-bottom:10px;
    padding:9px 10px;
    border:1px solid #aebfca;
    border-left:4px solid #0f8c99;
    border-radius:10px;
    background:#fff;
    box-shadow:0 3px 8px rgba(15,23,42,.10);
  }

  .kontrak-rute-table tbody td,
  .kontrak-gaji-table tbody td{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    align-items:center;
    gap:8px;
    width:auto !important;
    min-width:0 !important;
    padding:6px 0 !important;
    border:0 !important;
    border-bottom:1px solid #eef2f6 !important;
    background:transparent !important;
    white-space:normal !important;
  }

  .kontrak-rute-table tbody td:last-child,
  .kontrak-gaji-table tbody td:last-child{
    border-bottom:0 !important;
  }

  .kontrak-rute-table tbody td::before,
  .kontrak-gaji-table tbody td::before{
    color:#64748b;
    font-size:11px;
    font-weight:700;
  }

  .kontrak-rute-table tbody td:nth-child(1)::before{ content:'Rute'; }
  .kontrak-rute-table tbody td:nth-child(2)::before{ content:'Lokasi Muat'; }
  .kontrak-rute-table tbody td:nth-child(3)::before{ content:'Lokasi Bongkar'; }
  .kontrak-rute-table tbody td:nth-child(4)::before{ content:'Qty DO'; }
  .kontrak-rute-table tbody td:nth-child(5)::before{ content:'Harga Satuan'; }
  .kontrak-rute-table tbody td:nth-child(6)::before{ content:'Ongkos Angkut'; }
  .kontrak-rute-table tbody td:nth-child(7)::before{ content:'Aksi'; }

  .kontrak-gaji-table tbody td:nth-child(1)::before{ content:'No.'; }
  .kontrak-gaji-table tbody td:nth-child(2)::before{ content:'Rute'; }
  .kontrak-gaji-table tbody td:nth-child(3)::before{ content:'Supir'; }
  .kontrak-gaji-table tbody td:nth-child(4)::before{ content:'Gaji per Rit'; }
  .kontrak-gaji-table tbody td:nth-child(5)::before{ content:'Aksi'; }

  .kontrak-rute-table input,
  .kontrak-rute-table select,
  .kontrak-gaji-table input,
  .kontrak-gaji-table select{
    width:100% !important;
    min-width:0 !important;
  }

  .ringkasan-pelunasan .row{
    display:flex !important;
    flex-wrap:nowrap !important;
    margin:0 !important;
  }

  .investor-kontrak-table,
  .investor-kontrak-table tbody,
  .riwayat-investor-table,
  .riwayat-investor-table tbody{
    display:block !important;
    width:100%;
    min-width:0 !important;
    overflow:visible !important;
  }

  .investor-kontrak-table thead,
  .riwayat-investor-table thead{
    display:none;
  }

  .investor-kontrak-table tbody tr,
  .riwayat-investor-table tbody tr{
    display:block;
    margin-bottom:10px;
    padding:9px 10px;
    border:1px solid #aebfca;
    border-left:4px solid #0f8c99;
    border-radius:10px;
    background:#fff;
    box-shadow:0 3px 8px rgba(15,23,42,.10);
  }

  .investor-kontrak-table tbody td,
  .riwayat-investor-table tbody td{
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    gap:8px;
    width:auto !important;
    min-width:0 !important;
    padding:5px 0 !important;
    border:0 !important;
    border-bottom:1px solid #eef2f6 !important;
    background:transparent !important;
    white-space:normal !important;
    text-align:left !important;
  }

  .investor-kontrak-table tbody td:last-child,
  .riwayat-investor-table tbody td:last-child{
    border-bottom:0 !important;
  }

  .investor-kontrak-table tbody td::before,
  .riwayat-investor-table tbody td::before{
    color:#64748b;
    font-size:11px;
    font-weight:700;
  }

  .investor-kontrak-table tbody td:nth-child(1)::before{ content:'Investor'; }
  .investor-kontrak-table tbody td:nth-child(2)::before{ content:'Bagi Hasil'; }
  .investor-kontrak-table tbody td:nth-child(3)::before{ content:'Setoran'; }
  .investor-kontrak-table tbody td:nth-child(4)::before{ content:'Tanggal Setor'; }
  .investor-kontrak-table tbody td:nth-child(5)::before{ content:'Keterangan'; }
  .investor-kontrak-table tbody td:nth-child(6)::before{ content:'Pengembalian'; }
  .investor-kontrak-table tbody td:nth-child(7)::before{ content:'Terakhir Bayar'; }
  .investor-kontrak-table tbody td:nth-child(8)::before{ content:'Status'; }
  .investor-kontrak-table tbody td:nth-child(9)::before{ content:'Aksi'; }

  .riwayat-investor-table tbody td:nth-child(1)::before{ content:'No.'; }
  .riwayat-investor-table tbody td:nth-child(2)::before{ content:'Tanggal'; }
  .riwayat-investor-table tbody td:nth-child(3)::before{ content:'Nominal'; }
  .riwayat-investor-table tbody td:nth-child(4)::before{ content:'Catatan'; }
  .riwayat-investor-table tbody td:nth-child(5)::before{ content:'Aksi'; }

  .invoice-list-wrap{
    overflow:visible !important;
  }

  .invoice-contract-table{
    display:none !important;
  }

  .desktop-invoice-route-details{
    display:none !important;
  }

  .mobile-invoice-contract-summary{
    display:block;
    margin:0 0 14px;
    padding:12px;
    border:1px solid #cbd8e2;
    border-radius:11px;
    background:#f8fafc;
    box-shadow:0 2px 6px rgba(15,23,42,.06);
  }

  .mobile-contract-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }

  .mobile-contract-top > div{
    min-width:0;
  }

  .mobile-contract-label,
  .mobile-contract-flow span,
  .mobile-contract-stats span{
    display:block;
    color:#64748b;
    font-size:9px;
    line-height:1.2;
  }

  .mobile-contract-top strong{
    display:block;
    margin-top:2px;
    color:#007987;
    font-size:15px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }

  .mobile-contract-date{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:999px;
    background:#e2edf3;
    color:#334155;
    font-size:10px;
    font-weight:700;
  }

  .mobile-contract-customer{
    margin-top:10px;
    color:#0f172a;
    font-size:13px;
    font-weight:700;
  }

  .mobile-contract-job{
    margin-top:2px;
    color:#64748b;
    font-size:10px;
    line-height:1.35;
  }

  .mobile-contract-flow{
    display:grid;
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
    align-items:center;
    gap:4px;
    margin-top:10px;
    padding:9px 10px;
    border-radius:9px;
    background:#fff;
    border:1px solid #dbe4eb;
  }

  .mobile-contract-flow > div:last-child{
    text-align:right;
  }

  .mobile-contract-flow strong{
    display:block;
    margin-top:2px;
    color:#0f172a;
    font-size:12px;
  }

  .mobile-contract-arrow{
    color:#0f8c99 !important;
    font-size:16px !important;
    font-weight:700;
    text-align:center;
  }

  .mobile-contract-stats{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
    gap:6px;
    margin-top:6px;
  }

  .mobile-contract-stats > div{
    min-width:0;
    padding:7px 8px;
    border-radius:8px;
    background:#eaf1f5;
  }

  .mobile-contract-stats strong{
    display:block;
    margin-top:2px;
    color:#0f172a;
    font-size:11px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }

  .invoice-list-table,
  .invoice-list-table tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    white-space:normal !important;
  }

  .invoice-list-table thead{
    display:none !important;
  }

  .invoice-list-table tbody tr{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    margin-bottom:10px;
    padding:10px 11px;
    border:1px solid #aebfca;
    border-left:4px solid #0f8c99;
    border-radius:11px;
    background:#fff;
    box-shadow:0 3px 9px rgba(15,23,42,.11);
  }

  .invoice-list-table tbody td{
    display:block !important;
    grid-row:auto !important;
    width:auto !important;
    min-width:0 !important;
    padding:6px 7px !important;
    border:0 !important;
    border-radius:7px;
    background:#f1f5f9 !important;
    color:#0f172a;
    font-size:12px !important;
    line-height:1.35;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  .invoice-list-table tbody td::before{
    display:block;
    margin-bottom:2px;
    color:#64748b;
    font-size:9px;
    font-weight:600;
    line-height:1.2;
  }

  .invoice-list-table tbody td:nth-child(1){ display:none !important; }
  .invoice-list-table tbody td:nth-child(2){
    grid-column:1 / 5;
    background:transparent !important;
    color:#007987;
    font-size:14px !important;
    font-weight:700;
    padding:2px 0 !important;
  }
  .invoice-list-table tbody td:nth-child(2)::before{ content:'No. Invoice'; }
  .invoice-list-table tbody td:nth-child(3){
    grid-column:5 / 7;
    align-self:center;
    background:transparent !important;
    text-align:right !important;
    padding:2px 0 !important;
  }
  .invoice-list-table tbody td:nth-child(3)::before{ content:'Jenis'; }
  .invoice-list-table tbody td:nth-child(4)::before{ content:'Tanggal Invoice'; }
  .invoice-list-table tbody td:nth-child(5)::before{ content:'Jatuh Tempo'; }
  .invoice-list-table tbody td:nth-child(4){ grid-column:1 / 4; }
  .invoice-list-table tbody td:nth-child(5){ grid-column:4 / 7; }
  .invoice-list-table tbody td:nth-child(6),
  .invoice-list-table tbody td:nth-child(7),
  .invoice-list-table tbody td:nth-child(8){
    display:none !important;
  }
  .invoice-list-table tbody td:nth-child(9)::before{ content:'Total Tagihan'; }
  .invoice-list-table tbody td:nth-child(10)::before{ content:'Terbayar'; }
  .invoice-list-table tbody td:nth-child(11)::before{ content:'Potongan'; }
  .invoice-list-table tbody td:nth-child(12)::before{ content:'Sisa'; }
  .invoice-list-table tbody td:nth-child(9){
    grid-column:1 / 7;
    padding:8px 9px !important;
    background:#dff4f5 !important;
    border:1px solid #79c3c9 !important;
    color:#075f68;
    font-size:15px !important;
    font-weight:700;
  }
  .invoice-list-table tbody td:nth-child(10){ grid-column:1 / 3; }
  .invoice-list-table tbody td:nth-child(11){ grid-column:3 / 5; }
  .invoice-list-table tbody td:nth-child(12){
    grid-column:5 / 7;
    background:#e7effb !important;
    border:1px solid #a8bee0 !important;
    font-weight:700;
  }
  .invoice-list-table tbody td:nth-child(13){
    grid-column:1 / 7;
    margin-top:2px;
    padding:8px 0 0 !important;
    border-top:1px solid #e2e8f0 !important;
    border-radius:0;
    background:transparent !important;
  }
  .invoice-list-table tbody td:nth-child(13)::before{ content:'Aksi'; }

  .invoice-list-table .aksi-group{
    justify-content:flex-start;
  }
}

@media (max-width:1024px) and (min-width:769px){
  .investor-funding-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pengangkutan-contract-card .pengangkutan-header-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
  }
}

@media (max-width:768px){
  .form-box.kontrak-form-card,
  .kontrak-detail-card,
  .pengangkutan-contract-card,
  .contract-transaction-card,
  .investor-contract-summary,
  .investor-list-card,
  .investor-history-card{
    padding:12px !important;
  }

  .contract-form-section{
    padding:10px !important;
  }

  .kontrak-detail-card .detail-section{
    padding:10px !important;
  }

  .kontrak-detail-card .detail-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .kontrak-detail-card .detail-label{
    margin:0 !important;
    padding:7px 9px 2px;
    border-bottom:0;
    background:#fff;
    font-size:10px;
  }

  .kontrak-detail-card .detail-value{
    padding:2px 9px 8px;
    background:#fff;
  }

  .pengangkutan-contract-card .pengangkutan-header-meta{
    width:100%;
    min-width:0 !important;
    padding:10px;
    text-align:left !important;
  }

  .investor-contract-panel{
    padding:10px;
  }

  .investor-funding-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .investor-funding-summary > div{
    padding:8px;
    font-size:10px;
  }

  .investor-funding-summary > div b{
    font-size:12px;
  }

  .contract-detail-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  }

  .contract-detail-actions .btn{
    width:100%;
    padding:8px 10px !important;
  }
}


/* Hak akses halaman, role, dan fitur */
.access-grid,
.akses-grid,
.akses-role-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.access-grid th,.access-grid td,
.akses-grid th,.akses-grid td,
.akses-role-grid th,.akses-role-grid td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
.access-grid th,
.akses-grid th,
.akses-role-grid th{
  background:var(--pri);
  color:#fff;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
.akses-grid td,
.akses-role-grid td{text-align:center}
.akses-grid td:first-child,
.akses-grid td:nth-child(2),
.akses-role-grid td:first-child{text-align:left}
.akses-grid td:first-child{min-width:220px}
.akses-grid td:nth-child(2){min-width:170px}
.akses-grid td:nth-child(3){min-width:100px}
.akses-role-grid td:first-child{min-width:220px}
.access-grid input[type=checkbox],
.akses-grid input[type=checkbox],
.akses-role-grid input[type=checkbox]{width:18px;height:18px;cursor:pointer}
.th-all{font-weight:500;font-size:12px}

/* Gabungan pengaturan hak akses halaman dan fitur */
.access-section{
  margin-top:20px;
}
.access-section + .access-section{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.access-section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.access-section-header h4{
  margin:0;
}
.access-grid input[type=checkbox]:disabled,
.akses-grid input[type=checkbox]:disabled,
.akses-role-grid input[type=checkbox]:disabled{
  cursor:not-allowed;
  opacity:.65;
}
@media (max-width:768px){
  .access-section-header{
    flex-wrap:wrap;
  }
}



/* =====================================================
   LAPORAN INVOICE - PENGATURAN KOLOM
   ===================================================== */
.invoice-report-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.invoice-column-view-label{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.invoice-column-trigger{
  gap:7px;
  min-height:36px;
  border-color:var(--pri);
  color:var(--pri);
  white-space:nowrap;
}
.invoice-column-modal{
  width:min(820px, calc(100vw - 32px));
  padding:0 !important;
  overflow:hidden;
}
.invoice-column-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
}
.invoice-column-modal-header h4{
  margin:0 0 4px;
  color:var(--pri);
}
.invoice-column-presets{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:14px 18px 0;
}
.invoice-column-preset.is-active{
  border-color:var(--pri);
  background:var(--pri);
  color:#fff;
}
.invoice-column-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px 12px;
  max-height:46vh;
  overflow-y:auto;
  padding:14px 18px 18px;
}
.invoice-column-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:#fff;
  color:var(--txt);
  font-size:13px;
  cursor:pointer;
}
.invoice-column-grid label:hover{
  border-color:#b7d9de;
  background:#f5fbfc;
}
.invoice-column-grid input[type="checkbox"]{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--pri);
  flex:0 0 auto;
}
.invoice-column-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:13px 18px;
  border-top:1px solid var(--line-soft);
  background:#f8fafc;
}
#laporan-invoice-table .no-actions{
  width:auto !important;
  min-width:32px;
  flex:0 0 auto !important;
}

@media (max-width: 768px){
  .invoice-report-toolbar{
    width:100%;
    justify-content:flex-start;
  }
  .invoice-column-view-label{
    order:3;
    width:100%;
    justify-content:center;
  }
  .invoice-column-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:52vh;
  }
}

@media (max-width: 480px){
  .invoice-column-grid{
    grid-template-columns:1fr;
  }
  .invoice-column-modal-footer .btn{
    flex:1;
  }
}

/* =========================================================
   MODUL PAJAK VENDOR
   Seluruh selector dibuat khusus agar tidak mengubah halaman lain.
   ========================================================= */
.vendor-tax-page{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.vendor-tax-page .tax-filter-panel,
.tax-settings-panel{
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:var(--surface-soft);
}

.vendor-tax-page .tax-filter-panel{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.vendor-tax-page .tax-sync-status{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.vendor-tax-page .tax-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.vendor-tax-page .tax-summary-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:#fff;
}

.vendor-tax-page .tax-summary-card span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
}

.vendor-tax-page .tax-summary-card strong{
  font-size:18px;
  color:var(--txt);
}

.vendor-tax-page .tax-table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:#fff;
}

.vendor-tax-page .tax-table-wrap .report-table{
  display:table;
  width:max-content;
  min-width:100%;
  max-width:none;
  table-layout:auto;
  margin:0;
}

.vendor-tax-page .tax-table-wrap .report-table th,
.vendor-tax-page .tax-table-wrap .report-table td{
  width:auto;
  min-width:0;
  white-space:nowrap;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="no"],
.vendor-tax-page .tax-table-wrap .report-table [data-col="nik"]{
  width:1%;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="aksi"]{
  width:auto;
  min-width:132px;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="vendor"]{
  min-width:150px;
  max-width:250px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="skema"]{
  min-width:145px;
  white-space:normal;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="aksi"]{
  white-space:nowrap;
}

.vendor-tax-page .tax-table-wrap .report-table [data-col="aksi"] .aksi-group{
  display:inline-flex;
  width:max-content;
  min-width:max-content;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:6px;
  margin:0 auto;
}

.vendor-tax-page .month-money-cell{
  width:1%;
  min-width:0;
  text-align:right;
  white-space:nowrap;
}

.vendor-tax-page .month-money-cell span,
.vendor-tax-page .month-money-cell small{
  display:block;
}

.vendor-tax-page .month-money-cell small{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.vendor-tax-page .doc-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.vendor-tax-page .doc-ready{
  background:#dcfce7;
  color:#166534;
}

.vendor-tax-page .doc-missing{
  background:#fee2e2;
  color:#b91c1c;
}

.vendor-tax-page .doc-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:5px;
}

.vendor-tax-page .column-picker-panel{
  position:absolute;
  top:72px;
  right:16px;
  z-index:40;
  width:min(620px,calc(100vw - 36px));
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}

.vendor-tax-page .column-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.vendor-tax-page .column-picker-presets{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.vendor-tax-page .column-picker-checks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  max-height:310px;
  overflow:auto;
}

.vendor-tax-page .column-picker-check-item{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 9px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

.vendor-tax-page .column-picker-check-item input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--pri);
}

.vendor-tax-modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:1400;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.48);
}

.vendor-tax-modal-backdrop:not([hidden]){
  display:flex;
}

.vendor-tax-modal-card{
  width:min(680px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:18px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 22px 55px rgba(15,23,42,.24);
}

.vendor-tax-modal-sm{
  width:min(520px,100%);
}

.vendor-tax-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.vendor-tax-modal-header h4{
  margin:0 0 4px;
  color:var(--pri);
}

.vendor-tax-modal-card .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}

.tax-role-checks{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.tax-role-check-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

.tax-role-check-item input{
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--pri);
}

.vendor-payment-form-grid{
  display:grid;
  grid-template-columns:minmax(145px, 170px) minmax(205px, 250px) minmax(240px, 1fr) 42px;
  gap:10px;
  align-items:end;
  margin-bottom:8px;
}

.vendor-payment-field{
  min-width:0;
}

.vendor-payment-field label{
  display:block;
  min-height:20px;
  margin-bottom:4px;
}

.vendor-payment-field .form-control{
  width:100%;
  min-width:0;
}

.vendor-payment-limit{
  font-weight:400;
}

.vendor-payment-submit{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.vendor-payment-submit .btn-icon{
  flex:0 0 auto;
}

.vendor-payment-error{
  margin-top:4px;
  color:#b91c1c;
  font-size:12px;
}

.tax-payment-preview{
  display:grid;
  grid-template-columns:repeat(2, minmax(150px, 220px));
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:4px;
  padding:8px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:var(--soft);
}

.tax-payment-preview-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:190px;
  padding:7px 10px;
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:12px;
}

.tax-payment-preview-item strong{
  color:var(--text);
  font-size:13px;
  white-space:nowrap;
}

.tax-payment-preview-net strong{
  color:var(--pri);
}

@media (max-width:900px){
  .vendor-payment-form-grid{
    grid-template-columns:minmax(140px, 170px) minmax(190px, 230px) minmax(200px, 1fr) 42px;
  }
}

@media (max-width:768px){
  .vendor-payment-form-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .vendor-payment-submit{
    justify-content:flex-start;
  }

  .tax-payment-preview{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .tax-payment-preview-item{
    min-width:0;
  }
}

@media (max-width:480px){
  .tax-payment-preview{
    grid-template-columns:1fr;
  }
}

.vendor-tax-notification-backdrop{
  position:fixed;
  inset:0;
  z-index:1350;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.42);
}

.vendor-tax-notification-card{
  width:min(620px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:18px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 22px 55px rgba(15,23,42,.24);
}

.vendor-tax-notification-head,
.vendor-tax-notification-heading{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.vendor-tax-notification-head{
  margin-bottom:12px;
}

.vendor-tax-notification-heading{
  flex:1;
}

.vendor-tax-notification-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  background:#fff7ed;
  color:#c2410c;
  font-size:20px;
}

.vendor-tax-notification-heading h4{
  margin:0 0 4px;
  color:#9a3412;
}

.vendor-tax-notification-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vendor-tax-notification-item{
  padding:11px 12px;
  border:1px solid #fed7aa;
  border-radius:10px;
  background:#fff7ed;
}

.vendor-tax-notification-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

@media (max-width:768px){
  .vendor-tax-page{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .vendor-tax-page .tax-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .vendor-tax-page .tax-table-wrap .report-table{
    width:max-content;
    min-width:100%;
  }

  .vendor-tax-page .tax-table-wrap .report-table th,
  .vendor-tax-page .tax-table-wrap .report-table td{
    padding:8px;
    font-size:12px;
  }

  .vendor-tax-page .tax-table-wrap .report-table [data-col="vendor"]{
    min-width:130px;
    max-width:190px;
  }

  .vendor-tax-page .tax-table-wrap .report-table [data-col="skema"]{
    min-width:125px;
  }

  .vendor-tax-page .tax-table-wrap .report-table [data-col="aksi"]{
    min-width:126px;
  }

  .vendor-tax-page .tax-table-wrap .report-table [data-col="aksi"] .aksi-group{
    flex-wrap:nowrap;
  }

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

  .vendor-tax-page .column-picker-checks{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vendor-tax-page .tax-filter-panel .btn{
    flex:1;
  }
}

@media (max-width:480px){
  .vendor-tax-page .column-picker-checks{
    grid-template-columns:1fr;
  }

  .vendor-tax-modal-card,
  .vendor-tax-notification-card{
    padding:14px;
  }

  .vendor-tax-modal-card .modal-actions .btn,
  .vendor-tax-notification-actions .btn{
    flex:1;
  }
}

/* =========================================================
   PAJAK VENDOR — RINCIAN DPP & AKSI DOKUMEN
   ========================================================= */
.vendor-tax-page .tax-dpp-detail-btn{
  display:inline;
  padding:0;
  border:0;
  border-bottom:1px dashed currentColor;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:600;
  text-align:right;
  cursor:pointer;
}

.vendor-tax-page .tax-dpp-detail-btn:hover,
.vendor-tax-page .tax-dpp-detail-btn:focus-visible{
  color:var(--pri);
  outline:none;
}

.vendor-tax-page .tax-dpp-detail-total{
  font-weight:700;
}

.vendor-tax-detail-modal{
  width:min(980px,100%);
}

.tax-detail-loading{
  padding:22px;
  text-align:center;
  color:var(--muted);
}

.tax-detail-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line-soft);
  border-radius:12px;
}

.tax-detail-table{
  min-width:760px;
  margin:0;
}

.tax-detail-table th,
.tax-detail-table td{
  vertical-align:middle;
}

.tax-detail-table tfoot th{
  background:#f8fafc;
  font-weight:700;
}

.tax-document-current{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
  padding:12px;
  border:1px solid #bbf7d0;
  border-radius:10px;
  background:#f0fdf4;
}

.tax-document-name{
  overflow-wrap:anywhere;
}

.tax-document-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tax-document-upload-form{
  margin-top:14px;
}

@media (max-width:768px){
  .vendor-tax-detail-modal{
    width:100%;
  }

  .tax-detail-table{
    min-width:680px;
  }

  .vendor-tax-page .tax-dpp-detail-btn{
    min-height:30px;
  }
}

/* =====================================================
   PELUNASAN VENDOR — TABEL DETAIL RINGKAS
   ===================================================== */
.pelunasan-vendor-detail-wrap{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.pelunasan-vendor-detail-table{
  width:100%;
  min-width:1080px;
  table-layout:fixed;
}

.pelunasan-vendor-detail-table th,
.pelunasan-vendor-detail-table td{
  white-space:nowrap;
  vertical-align:middle;
}

.pelunasan-vendor-detail-table .col-no{
  width:4%;
  min-width:44px;
}

.pelunasan-vendor-detail-table .col-vendor{
  width:20%;
  min-width:170px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.pelunasan-vendor-detail-table .col-ritase{
  width:12%;
}

.pelunasan-vendor-detail-table .col-kompensasi{
  width:12%;
}

.pelunasan-vendor-detail-table .col-pph{
  width:8%;
}

.pelunasan-vendor-detail-table .col-date{
  width:10%;
  min-width:94px;
}

.pelunasan-vendor-detail-table .col-nominal{
  width:12%;
}

.pelunasan-vendor-detail-table .col-sisa{
  width:12%;
}

.pelunasan-vendor-detail-table .col-action{
  width:10%;
  min-width:112px;
}

.pelunasan-vendor-detail-table .pelunasan-vendor-actions{
  display:flex !important;
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:center;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  margin:0;
}

.pelunasan-vendor-detail-table .pelunasan-vendor-actions .btn-icon{
  flex:0 0 auto;
}

.pelunasan-vendor-detail-table .vendor-payment-disabled{
  filter:grayscale(.15);
}

@media (max-width:768px){
  .pelunasan-vendor-detail-table{
    width:1080px;
    min-width:1080px;
    table-layout:fixed;
  }

  .pelunasan-vendor-detail-table th,
  .pelunasan-vendor-detail-table td{
    padding:8px;
    font-size:12px;
  }

  .pelunasan-vendor-detail-table .col-vendor{
    min-width:170px;
  }
}


/* =====================================================
   PELUNASAN VENDOR — STATUS SINKRONISASI PAJAK
   ===================================================== */
.vendor-payment-sync-warning{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #f59e0b;
  border-radius:10px;
  background:#fffbeb;
  color:#92400e;
}

.vendor-payment-sync-warning-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  background:#fef3c7;
  font-size:17px;
}

.vendor-payment-sync-warning-content{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.vendor-payment-sync-warning-content strong{
  color:#78350f;
}

.vendor-payment-sync-link{
  flex:0 0 auto;
  white-space:nowrap;
}

.vendor-payment-sync-inline{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border:1px solid #f59e0b;
  border-radius:9px;
  background:#fffbeb;
  color:#92400e;
}

@media (max-width:768px){
  .vendor-payment-sync-warning{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .vendor-payment-sync-link{
    width:100%;
    text-align:center;
  }
}


/* =====================================================
   PELUNASAN VENDOR — HISTORY PEMBAYARAN
   ===================================================== */
.vendor-payment-history-wrap{
  width:100%;
  max-width:100%;
  max-height:260px;
  overflow:auto;
  margin-bottom:10px;
  border-radius:9px;
  -webkit-overflow-scrolling:touch;
}

.vendor-payment-history-table{
  width:max-content;
  min-width:100%;
  table-layout:auto;
  margin:0;
}

.vendor-payment-history-table th,
.vendor-payment-history-table td{
  vertical-align:middle;
}

.vendor-payment-history-table th{
  line-height:1.2;
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:normal;
}

.vendor-payment-history-table td{
  white-space:nowrap;
}

.vendor-payment-history-table .history-col-no{
  width:auto;
  min-width:40px;
  text-align:center;
}

.vendor-payment-history-table .history-col-date{
  width:auto;
  min-width:96px;
  text-align:center;
}

.vendor-payment-history-table .history-col-money{
  width:auto;
  min-width:122px;
}

.vendor-payment-history-table .history-col-pph{
  width:auto;
  min-width:76px;
}

.vendor-payment-history-table .history-col-note{
  width:100%;
  min-width:90px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.vendor-payment-history-table .history-col-action{
  width:auto;
  min-width:96px;
  padding-left:6px;
  padding-right:6px;
}

.vendor-payment-history-actions{
  display:inline-flex;
  width:max-content;
  min-width:max-content;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:6px;
}

.vendor-payment-history-actions form{
  display:inline-flex;
  margin:0;
}

.vendor-payment-history-actions .btn-icon{
  flex:0 0 auto;
}

@media (max-width:768px){
  .vendor-payment-history-table{
    width:max-content;
    min-width:780px;
  }

  .vendor-payment-history-table th,
  .vendor-payment-history-table td{
    padding:7px;
    font-size:12px;
  }
}