/* ====================================================== */
/* == PENGGANTI BOOTSTRAP - CSS KUSTOM ANDA == */
/* ====================================================== */
/* 1. Pengaturan Dasar & Layout Utama */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-fluidx {
    width: 100%;
    /* Sedikit padding di kiri-kanan halaman */
    /* Pusatkan kontainer */
    padding-top: 17px;
    height: 16px;
}

h3 {
    margin-top: -21px;
    margin-bottom: 8px;
    /* Jarak bawah judul */
    font-size: 24px;
    color: #333;
}

/* 2. Gaya untuk Area Filter (Menggantikan .card) */
.filter-card {
    background-color: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 8px;
    /* Sudut lebih tumpul */
    padding: 11px 20px 0px;
    /* Padding di dalam kartu */
    margin-bottom: 7px;
    /* Jarak kartu ke tabel di bawahnya */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Bayangan halus */
    width: 93%;
    max-width: 800px;
}

/* 3. Tata Letak Form (Menggantikan Grid System Bootstrap) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    /* Izinkan item pindah ke baris baru jika tidak cukup */
    margin-right: -10px;
    /* Kompensasi padding item */
    margin-left: -10px;
    height: 77px;
}

.form-group {
    padding-right: 10px;
    /* Jarak antar item form */
    padding-left: 10px;
    margin-bottom: 15px;
    /* Jarak vertikal antar baris form */
    display: flex;
    flex-direction: column;
    /* Susun label di atas input */
}

/* Menggantikan .col-md-4, .col-md-3, dll. */
.form-group.col-md-4 {
    flex: 0 0 33.3333%;
    /* Ambil 1/3 lebar */
    max-width: 33.3333%;
}

.form-group.col-md-3x {
    /* Anda menggunakan "3x", kita asumsikan maksudnya 3 */
    flex: 0 0 25%;
    /* Ambil 1/4 lebar */
    max-width: 25%;
}

.form-group.col-md-2x {
    /* Anda menggunakan "2x", kita asumsikan maksudnya 2 */
    flex: 0 0 16.6667%;
    /* Ambil 1/6 lebar */
    max-width: 16.6667%;
}

/* 4. Gaya untuk Input, Select, dan Label (Menggantikan .form-control) */
label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #495057;
}

.form-control {
    width: 100%;
    /* Lebar penuh mengikuti parent (.form-group) */
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #FFF;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    box-sizing: border-box;
    /* Penting agar padding tidak menambah lebar */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80BDFF;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-control[readonly] {
    background-color: #E9ECEF;
    /* Warna untuk input yang tidak bisa diubah */
    opacity: 1;
}

/* ====================================================== */
/* == GAYA KUSTOM ANDA YANG SUDAH ADA (DIMODIFIKASI) == */
/* ====================================================== */
/* Sembunyikan tombol Terapkan */
#btnTerapkan {
    display: none;
}

/* Pastikan kontainer tabel responsif */
.handsontable .debet-cell {
    background-color: #F0F3F1 !important;
}

.handsontable .kredit-cell {
    background-color: #F8EEEE !important;
}

.handsontable .readonly-row {
    background-color: #FFF0F1 !important;
}

.handsontable .autocompleteEditor {
    min-width: 350px !important;
    z-index: 1050;
}

.handsontable .htRight {
    text-align: right;
    font-weight: bold;
}

.handsontable .htCenter {
    text-align: center;
}

.handsontable .delete-btn {
    color: #DC3545;
    cursor: pointer;
    text-align: center;
    font-size: 1.1em;
}

.handsontable .delete-btn:hover {
    color: #A71D2A;
}

/* ====================================================== */
/* ==   GAYA KUSTOM UNTUK SETIAP KOLOM HANDSONTABLE    == */
/* ====================================================== */
/* Penting: Mengatur agar lebar kolom dipatuhi oleh browser */
.handsontable table {
    table-layout: fixed;
}

/* Penting: Izinkan kontainer untuk memiliki scrollbar horizontal */
#handsonContainer {
    width: 100%;
    overflow-x: auto;
    /* Tampilkan scrollbar horizontal jika total lebar kolom melebihi kontainer */
    overflow: scroll;
}

/* -- Definisi Lebar dan Gaya untuk Setiap Kolom -- */
.handsontable .col-id {
    width: 50px;
}

.handsontable .col-nomor {
    width: 140px;
}

.handsontable .col-tanggal, .handsontable .col-lawan {
    width: 110px;
    text-align: center;
}

/* Kolom teks dengan overflow tersembunyi */
.handsontable .col-nama-lawan, .handsontable .col-ket {
    width: 250px;
    /* Atur lebar fiks di sini */
    text-align: left;
    white-space: nowrap;
    /* Mencegah teks turun ke baris baru */
    overflow: hidden;
    /* Sembunyikan teks yang meluber keluar dari sel */
    text-overflow: ellipsis;
    /* Tampilkan "..." pada teks yang terpotong */
}

/* Anda bisa mengatur lebar kolom Keterangan lebih besar jika perlu */
.handsontable .col-ket {
    width: 318px;
}

/* Kolom finansial */
.handsontable .col-debet, .handsontable .col-kredit {
    width: 150px;
    text-align: right !important;
    font-weight: bold;
}

.handsontable .col-saldo {
    width: 160px;
    text-align: right !important;
    font-weight: bold;
}

.handsontable .col-aksi {
    width: 60px;
    text-align: center !important;
}

/* -- Gaya Visual Tambahan (Warna, Font, dll) -- */
.handsontable .col-debet {
    background-color: #F0F3F1 !important;
}

.handsontable .col-kredit {
    background-color: #F8EEEE !important;
}

/* ====================================================== */
/* == PENGGANTI BOOTSTRAP - CSS KUSTOM ANDA == */
/* ====================================================== */
/* 1. Pengaturan Dasar & Layout Utama */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-fluidx {
    width: 100%;
    /* Sedikit padding di kiri-kanan halaman */
    /* Pusatkan kontainer */
    padding-top: 17px;
    height: 16px;
}

h3 {
    margin-top: -21px;
    margin-bottom: 8px;
    /* Jarak bawah judul */
    font-size: 24px;
    color: #333;
}

/* 2. Gaya untuk Area Filter (Menggantikan .card) */
.filter-card {
    background-color: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 8px;
    /* Sudut lebih tumpul */
    padding: 11px 20px 0px;
    /* Padding di dalam kartu */
    margin-bottom: 7px;
    /* Jarak kartu ke tabel di bawahnya */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Bayangan halus */
    width: 121%;
    max-width: 984px;
}

/* 3. Tata Letak Form (Menggantikan Grid System Bootstrap) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    /* Izinkan item pindah ke baris baru jika tidak cukup */
    margin-right: -10px;
    /* Kompensasi padding item */
    margin-left: -10px;
    height: 77px;
}

.form-group {
    padding-right: 10px;
    /* Jarak antar item form */
    padding-left: 10px;
    margin-bottom: 15px;
    /* Jarak vertikal antar baris form */
    display: flex;
    flex-direction: column;
    /* Susun label di atas input */
}

/* Menggantikan .col-md-4, .col-md-3, dll. */
.form-group.col-md-4 {
    flex: 0 0 33.3333%;
    /* Ambil 1/3 lebar */
    max-width: 33.3333%;
}

.form-group.col-md-3x {
    /* Anda menggunakan "3x", kita asumsikan maksudnya 3 */
    flex: 0 0 25%;
    /* Ambil 1/4 lebar */
    max-width: 25%;
}

.form-group.col-md-2x {
    /* Anda menggunakan "2x", kita asumsikan maksudnya 2 */
    flex: 0 0 16.6667%;
    /* Ambil 1/6 lebar */
    max-width: 16.6667%;
}

/* 4. Gaya untuk Input, Select, dan Label (Menggantikan .form-control) */
label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #495057;
}

.form-control {
    width: 103%;
    /* Lebar penuh mengikuti parent (.form-group) */
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #FFF;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    box-sizing: border-box;
    /* Penting agar padding tidak menambah lebar */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80BDFF;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-control[readonly] {
    background-color: #E9ECEF;
    /* Warna untuk input yang tidak bisa diubah */
    opacity: 1;
}

/* ====================================================== */
/* == GAYA KUSTOM ANDA YANG SUDAH ADA (DIMODIFIKASI) == */
/* ====================================================== */
/* Sembunyikan tombol Terapkan */
#btnTerapkan {
    display: none;
}

/* Pastikan kontainer tabel responsif */
.handsontable .debet-cell {
    background-color: #F0F3F1 !important;
}

.handsontable .kredit-cell {
    background-color: #F8EEEE !important;
}

.handsontable .readonly-row {
    background-color: #FFF0F1 !important;
}

.handsontable .autocompleteEditor {
    min-width: 350px !important;
    z-index: 1050;
}

.handsontable .htRight {
    text-align: right;
    font-weight: bold;
}

.handsontable .htCenter {
    text-align: center;
}

.handsontable .delete-btn {
    color: #DC3545;
    cursor: pointer;
    text-align: center;
    font-size: 1.1em;
}

.handsontable .delete-btn:hover {
    color: #A71D2A;
}

/* == PENAMBAHAN UNTUK INDENTASI == */
.handsontable .indent-kredit {
    padding-left: 20px !important;
    /* Memberi jarak kiri pada sel nama akun lawan jika ada nilai kredit */
}

/* ====================================================== */
/* ==   GAYA KUSTOM UNTUK SETIAP KOLOM HANDSONTABLE    == */
/* ====================================================== */
/* Penting: Mengatur agar lebar kolom dipatuhi oleh browser */
.handsontable table {
    table-layout: fixed;
}

/* Penting: Izinkan kontainer untuk memiliki scrollbar horizontal */
#handsonContainer {
    width: 100%;
    overflow-x: auto;
    /* Tampilkan scrollbar horizontal jika total lebar kolom melebihi kontainer */
    overflow: scroll;
}

/* -- Definisi Lebar dan Gaya untuk Setiap Kolom -- */
.handsontable .col-id {
    width: 50px;
}

.handsontable .col-nomor {
    width: 140px;
}

.handsontable .col-tanggal, .handsontable .col-lawan {
    width: 110px;
    text-align: center;
}

/* Kolom teks dengan overflow tersembunyi */
.handsontable .col-nama-lawan, .handsontable .col-ket {
    width: 250px;
    /* Atur lebar fiks di sini */
    text-align: left;
    white-space: nowrap;
    /* Mencegah teks turun ke baris baru */
    overflow: hidden;
    /* Sembunyikan teks yang meluber keluar dari sel */
    text-overflow: ellipsis;
    /* Tampilkan "..." pada teks yang terpotong */
}

/* Anda bisa mengatur lebar kolom Keterangan lebih besar jika perlu */
.handsontable .col-ket {
    width: 318px;
}

/* Kolom finansial */
.handsontable .col-debet, .handsontable .col-kredit {
    width: 150px;
    text-align: right !important;
    font-weight: bold;
}

.handsontable .col-saldo {
    width: 160px;
    text-align: right !important;
    font-weight: bold;
}

.handsontable .col-aksi {
    width: 60px;
    text-align: center !important;
}

/* -- Gaya Visual Tambahan (Warna, Font, dll) -- */
.handsontable .col-debet {
    background-color: #F0F3F1 !important;
}

.handsontable .col-kredit {
    background-color: #F8EEEE !important;
}
/* ...sisa gaya visual Anda lainnya... */
/* Aturan di bawah ini tidak lagi diperlukan karena sudah ditangani di .container-fluidx */
/* ...sisa gaya visual Anda lainnya... */
/* Aturan di bawah ini tidak lagi diperlukan karena sudah ditangani di .container-fluidx */
