/* css/layout.css */

/* --- CUSTOM LAYOUT UNTUK TOMBOL TAMBAH DAN SEARCH INPUT --- */
.header-section {
    display: flex;         /* 1. Gunakan Flexbox */
    justify-content: space-between; /* 2. Beri jarak merata antar item */
    align-items: center;   /* 3. Sejajarkan item di tengah secara vertikal */
    width: 100%;
    margin-bottom: 20px;
    gap: 10px;             /* Jarak antar tombol */
    flex-wrap: wrap;       /* Izinkan tombol turun baris jika layar sempit */
}

.header-section > div {
    display: flex;
    flex-direction: column;
    /* Biarkan setiap kolom tumbuh mengisi ruang */
    align-items: flex-start; /* Konten di tengah secara horizontal */
    text-align: center; /* Untuk H2 */
}

.header-section h2 {
    margin: 0;
    padding-bottom: 5px;
}

.header-section button {
    margin: 0;
    /*width: 20%; /* Tombol mengambil lebar penuh dari kolomnya */
    max-width: 200px; /* Batasi lebar agar tidak terlalu panjang */
}

.header-section input[type="text"] {
    margin: 0;
    width: 100%;
    max-width: 200px; /* Batasi lebar agar tidak terlalu panjang */
}

.header-section .right-content {
    margin-left: auto;
    margin-right: 100px;
}