/* public_html/asset/css/input_data.css */

/* Global Box Sizing for better layout control */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Set background color for the entire page (the gray area) */
body, html {
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
}

/* Kontainer utama untuk semua form input */
.input-data-page-container {
    display: flex; /* Change to flexbox for a single column layout */
    flex-direction: column; /* Stack items vertically */
    /* PENTING: Set gap ke 0 untuk mengontrol jarak secara manual dengan margin/padding */
    gap: 0 !important; /* Ensure gap is 0 everywhere */
    padding: 60px 100px 70px 60px; /* Adjusted padding for aesthetics */
    background-color: #ffffff; /* Single background for the whole form */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto; /* Center the form, auto margin for left/right */
    max-width: 1600px; /* Increased max-width significantly */
    width: 95%; /* Take 95% of the viewport width, up to max-width */
    overflow-x: hidden; /* Prevent horizontal overflow for the main container */
    overflow-y: auto; /* Allow the main container to scroll if content is too long */
}

/* Styling untuk setiap bagian form (sekarang sebagai bagian dari satu form besar) */
.input-form-section {
    background-color: transparent; /* No individual background */
    padding: 0; /* No individual padding */
    border-radius: 0; /* No individual border-radius */
    box-shadow: none; /* No individual shadow */
    border: none; /* Hapus border umum yang mungkin mengganggu */
    overflow: visible !important;
    height: auto !important; /* Allow height to adjust to content */
    max-height: none !important; /* Remove any maximum height constraint */
}

/* NEW: Styling untuk header section dengan select di samping judul */
.section-header-with-select {
    display: flex;
    justify-content: space-between; /* Judul di kiri, select di kanan */
    align-items: center; /* Rata tengah secara vertikal */
    margin-bottom: 15px; /* Jarak antara header dan input-row pertama */
    border-bottom: 2px solid #007bff; /* Garis bawah biru */
    padding-bottom: 8px; /* Padding di bawah garis */
}

.section-header-with-select .form-title {
    margin-bottom: 0; /* Hapus margin bawah default dari form-title */
    border-bottom: none; /* Hapus border bawah yang sudah dipindahkan ke parent */
    padding-bottom: 0; /* Hapus padding bawah yang sudah dipindahkan ke parent */
}

.section-header-with-select .select-existing-room-container {
    flex-shrink: 0; /* Pastikan select tidak menyusut */
    max-width: 220px; /* Lebar maksimal untuk select, mirip nama ruangan */
    min-width: 180px; /* Lebar minimum agar tidak terlalu kecil */
    width: 100%; /* Agar bisa mengisi max-width */
    margin-left: 20px; /* Jarak dari judul */
}

.section-header-with-select .select-existing-room-container .input-wrapper {
    height: 32px; /* Sesuaikan tinggi agar sejajar dengan judul */
}

.section-header-with-select .select-existing-room-container .input-wrapper select {
    font-size: 0.9em; /* Ukuran font sedikit lebih besar dari input lain */
    padding: 4px 8px; /* Sesuaikan padding */
}

/* Styling untuk label yang hanya untuk screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* NEW CSS UNTUK BAGIAN EXCEL UPLOAD DAN INFORMASI RUANGAN DALAM SATU BARIS */
/* For the main container that unites Excel Upload and Room Information */
.top-section-layout {
    display: flex; /* Arrange children in a single row */
    justify-content: space-between; /* Space between them */
    align-items: flex-start; /* Align to the top vertically */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Gap between flex items */

    /* PENTING: Garis pemisah untuk section INFORMASI RUANGAN */
    border-bottom: 2px solid #007bff !important; /* Garis pemisah biru yang jelas */
    /* DIUBAH: Mengurangi jarak menjadi 2px */
    padding-bottom: 2px !important; /* Jarak antara input terakhir di section ini dan garis */
    margin-bottom: 10px !important; /* Jarak antara garis dan section "DATA RUANGAN" berikutnya */
}

/* Styling for the compact Excel upload section */
.excel-upload-section.compact {
    flex: 0 0 auto; /* No grow, no shrink, take natural width */
    width: 120px; /* Lebar tetap yang lebih kecil */
    padding: 0; /* Hapus padding */
    border: none; /* Hapus border */
    border-radius: 0; /* Hapus border-radius */
    background-color: transparent; /* Hapus background color */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: unset; /* Hapus min-width */
    margin-top: 57px; /* Perkiraan tinggi .section-header-with-select + margin-bottom */
}

.excel-upload-compact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.excel-upload-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Untuk memusatkan ikon dan teks */
    cursor: pointer; /* Indicate it's clickable */
    width: 100%; /* Mengisi lebar parent */
    min-height: 80px; /* Tinggi minimum untuk menampung ikon dan teks */
    color: #007bff; /* Keep text color */
    transition: all 0.3s ease;
}

.excel-upload-trigger:hover {
    opacity: 0.8; /* Add a subtle hover effect like opacity change */
}

.excel-icon {
    width: 48px; /* Ukuran ikon yang lebih kecil */
    height: 30px; /* Ukuran ikon yang lebih kecil */
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
}

.excel-upload-text {
    font-size: 0.8em; /* Ukuran font teks yang lebih kecil */
    font-weight: bold; /* Teks lebih tebal */
}

/* The room information section will take up the remaining space */
.inspection-info-section {
    flex-grow: 1; /* Allow to grow and take available space */
    min-width: 400px; /* Ensure it's not too small */
    padding-bottom: 0;
    border-bottom: none;
}
/* END NEW CSS */


/* Styling untuk bagian INFORMASI INSPEKSI */
/* Mengatur ulang margin-bottom untuk form-group di inspection-info-section */
.inspection-info-section .form-group {
    margin-bottom: 0; /* Hapus margin bawah default dari form-group */
}

/* --- INFORMASI RUANGAN --- */
.inspection-info-section .input-row {
    display: flex;
    flex-wrap: nowrap; /* Mencegah wrapping agar tetap satu baris di desktop */
    gap: 15px; /* Jarak antar form-group */
    margin-bottom: 10px; /* Jarak antar baris input di section ini */
}

/* Mengatur flex untuk setiap input-field-with-unit di baris INFORMASI INSPEKSI */
.inspection-info-section .input-row > .input-field-with-unit {
    flex: 1 1 0%; /* Default flex: tumbuh, menyusut, lebar dasar 0% untuk distribusi merata */
    min-width: 150px; /* Lebar minimum untuk kontainer input */
}

/* Styling khusus untuk field Nama Gedung dan Nama Ruangan (lebih besar) */
.inspection-info-section .input-row > .input-field-with-unit.gedung-ruangan-field {
    flex: 1.5 1 0%; /* Akan mengambil proporsi lebih besar */
    min-width: 180px; /* Lebar minimum yang lebih besar */
}

/* Styling khusus untuk field Type dan Fungsi (lebih kecil dan selector) */
.inspection-info-section .input-row > .input-field-with-unit.type-fungsi-field {
    flex: 1 1 0%; /* Akan mengambil proporsi standar */
    min-width: 150px; /* Lebar minimum standar */
}


.input-form-section .form-title {
    font-size: 1.5em;
    color: #333;
}

/* Styling untuk setiap grup form (label dan input/select) */
.form-group {
    margin-bottom: 10px;
}

.form-group > label { /* Label utama di atas input-row */
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
    font-size: 0.95em;
}

/* Baris input yang berisi beberapa input-field-with-unit */
.input-row {
    display: flex;
    flex-wrap: nowrap; /* Mencegah wrap agar tetap satu baris di desktop */
    gap: 10px; /* Jarak antar field dalam satu baris */
}

/* Setiap kontainer input dengan unit. Ini adalah elemen yang akan dibagi rata. */
.input-field-with-unit {
    flex: 1 1 0%; /* PENTING: Allow max shrinking, grow to fill from 0 basis (equal distribution of containers) */
    min-width: 80px; /* Default min-width for the container */
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* Handled by gap in input-row */
}

/* --- DATA RUANGAN (Revisi untuk satu baris tunggal) --- */
.ruangan-section {
    /* PENTING: Pastikan tidak ada border-top, padding-top, atau margin-top yang konflik di sini */
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ruangan-section .input-row.all-ruangan-inputs {
    flex-wrap: nowrap; /* Pastikan semua input tetap dalam satu baris di desktop */
}

.ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit {
    flex: 1 1 0%; /* Distribusi merata untuk semua 10 input */
    min-width: 90px; /* Lebar minimum yang cukup untuk setiap input */
}

.ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit.kondisi-ruangan-field {
    flex: 1.5 1 0%; /* Beri sedikit proporsi lebih besar untuk select Kondisi Ruangan */
    min-width: 120px; /* Lebar minimum yang lebih besar */
}

/* --- DATA PENERANGAN (Revisi untuk satu baris tunggal) --- */
.lampu-section .input-row.all-lampu-inputs {
    flex-wrap: nowrap;
    align-items: flex-end; /* Tambahan untuk meratakan tombol Add ke bawah */
}
.lampu-section .input-row.all-lampu-inputs .input-field-with-unit {
    flex: 1 1 0%;
    min-width: 90px; /* Lebar minimum untuk setiap input lampu */
}
/* Penyesuaian khusus untuk Jenis Lampu (select) agar sedikit lebih lebar */
.lampu-section .input-row.all-lampu-inputs .input-field-with-unit:nth-child(1) {
    flex: 1.5 1 0%;
    min-width: 120px;
}


/* --- DATA PENDINGIN (Revisi untuk satu baris tunggal) --- */
.ac-section .input-row.all-ac-inputs {
    flex-wrap: nowrap;
    align-items: flex-end; /* Tambahan untuk meratakan tombol Add ke bawah */
}
.ac-section .input-row.all-ac-inputs .input-field-with-unit {
    flex: 1 1 0%;
    min-width: 80px; /* Lebar minimum default untuk input AC */
}
/* Penyesuaian khusus untuk Jenis AC dan Merk (select) */
.ac-section .input-row.all-ac-inputs .input-field-with-unit:nth-child(1), /* Jenis AC */
.ac-section .input-row.all-ac-inputs .input-field-with-unit:nth-child(2) { /* Merk AC */
    flex: 1.2 1 0%;
    min-width: 100px;
}
/* Penyesuaian untuk PK, Watt, Jumlah (ac-small-field) */
.ac-section .input-row.all-ac-inputs .input-field-with-unit.ac-small-field {
    flex: 0.8 1 0%;
    min-width: 70px;
}


/* --- DATA PERALATAN (Revisi untuk satu baris tunggal) --- */
.elektronik-section .input-row.all-elektronik-inputs {
    flex-wrap: nowrap;
    align-items: flex-end; /* Tambahan untuk meratakan tombol Add ke bawah */
}
.elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit {
    flex: 1 1 0%;
    min-width: 90px; /* Lebar minimum default untuk input elektronik */
}
/* Penyesuaian khusus untuk Jenis Alat (select) */
.elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(1) { /* Jenis Alat */
    flex: 1.5 1 0%;
    min-width: 120px;
}
/* Penyesuaian khusus untuk Type (text input) */
.elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(2) .input-wrapper input[type="text"] {
    flex-grow: 1; /* Izinkan tumbuh untuk mengisi ruang */
    max-width: none; /* Hapus batasan max-width */
    text-align: left; /* Kembalikan ke rata kiri */
}


/* Styling untuk tombol Add (sekarang dengan simbol +) */
.add-button {
    padding: 0 10px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
    width: 36px;
    text-align: center;
    transition: background-color 0.3s ease; /* Transisi warna untuk perubahan yang halus */
}

/* Definisi warna untuk tombol Add berdasarkan kelas yang ditambahkan JS */
.add-button.btn-success {
    background-color: #28a745; /* Hijau */
}

.add-button.btn-success:hover {
    background-color: #218838;
}

.add-button.btn-primary {
    background-color: #007bff; /* Biru */
}

.add-button.btn-primary:hover {
    background-color: #0056b3;
}


.input-field-with-unit label {
    display: block;
    margin-bottom: 3px;
    color: #666;
    font-size: 0.8em; /* Ukuran font label input diperkecil */
}

/* Wrapper untuk input/select dan unit */
.input-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Default: Align content to start */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fdfdfd; /* Latar belakang default input-wrapper */
    overflow: hidden; /* Ensure background color doesn't bleed */
}

/* NEW RULE: Untuk input-wrapper yang memiliki unit, ratakan ke kanan */
.input-wrapper.has-unit {
    justify-content: flex-end;
}

/* Styling untuk input dan select di dalam .input-wrapper (GLOBAL) */
.input-wrapper input[type="text"],
.input-wrapper select {
    flex-grow: 1; /* Default: Allow to grow to fill space */
    flex-shrink: 1; /* Allow to shrink */
    flex-basis: 0%; /* Start from 0, grow to fill */
    min-width: 0;
    padding: 6px 8px; /* Padding disesuaikan */
    border: none;
    outline: none;
    font-size: 0.8em; /* Ukuran font input/select diperkecil lagi */
    color: #333;
    background-color: white; /* Latar belakang input field menjadi putih solid */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* SPESIFIK UNTUK INPUT NUMERIK/PENDEK agar lebih ringkas (DESKTOP ONLY) */
/* Target semua input[type="text"] dalam bagian-bagian ini untuk kekompakan */
/* Kecuali yang sudah di-override secara spesifik */
.ruangan-section .input-wrapper input[type="text"],
.lampu-section .input-wrapper input[type="text"],
.ac-section .input-wrapper input[type="text"],
.elektronik-section .input-wrapper input[type="text"] {
    flex-grow: 0; /* PENTING: Jangan paksa input untuk mengisi semua ruang */
    flex-shrink: 1; /* Izinkan menyusut jika ruang terbatas */
    flex-basis: auto; /* Ambil lebar alami berdasarkan konten */
    width: auto; /* Ambil lebar alami */
    max-width: 70px; /* Batasi lebar maksimal agar tetap ringkas */
    text-align: right; /* Rata kanan untuk input numerik */
}

/* OVERRIDE: Untuk input teks yang seharusnya lebar (misal: "Type" di DATA PERALATAN) */
.elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(2) .input-wrapper input[type="text"] {
    flex-grow: 1; /* Izinkan tumbuh untuk mengisi ruang */
    max-width: none; /* Hapus batasan max-width */
    text-align: left; /* Kembalikan ke rata kiri */
}


/* Styling untuk unit di dalam .input-wrapper */
.input-wrapper .unit {
    flex-grow: 0; /* Jangan tumbuh */
    flex-shrink: 0; /* Jangan menyusut */
    flex-basis: auto; /* Ambil lebar alami */
    padding: 6px 8px; /* Padding disesuaikan */
    white-space: nowrap;
    color: #555;
    font-size: 0.8em; /* Ukuran font unit diperkecil lagi */
    min-width: 20px; /* Pastikan unit memiliki lebar minimum */
    background-color: #e9ecef; /* Background abu-abu untuk unit */
    border-top-right-radius: 4px; /* Sudut melengkung */
    border-bottom-right-radius: 4px; /* Sudut melengkung */
    border-left: 1px solid #ccc; /* Garis pemisah */
}

/* Sembunyikan input manual secara default (JavaScript akan mengubahnya) */
.input-manual-other {
    display: none;
}

/* Styling untuk select dropdown arrow */
.input-wrapper select {
    padding-right: 25px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.6-6.4H19.4c-6.5%200-12.1%203.1-15.9%208.9-3.7%205.8-3.7%2013.8%200%2019.6l128%20128c3.7%203.7%209.7%203.7%2013.4%200l128-128c3.7-5.8%203.7-13.9%200-19.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
}

/* Hover dan focus state */
.input-wrapper:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Styling untuk tombol RUANGAN BARU */
.action-button-container {
    display: flex;
    justify-content: flex-end; /* Menyelaraskan tombol ke kanan dalam containernya */
    padding-top: 15px; /* Memberi sedikit jarak dari section di atasnya */
}

.ruangan-baru-button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
}

.ruangan-baru-button:hover {
    background-color: #0056b3;
}

/* --- START: CSS BARU UNTUK TOMBOL SAVE DAN NEW --- */
/* Untuk memberikan jarak antara tombol "New" dan "Save" */
#btnSimpanRuangan {
    margin-left: 10px; /* Sesuaikan nilai ini sesuai kebutuhan Anda */
    background-color: #28a745; /* Warna hijau Bootstrap success */
    border-color: #28a745;
}

/* Mengubah warna tombol "Save" menjadi hijau saat hover */
#btnSimpanRuangan:hover {
    background-color: #218838; /* Warna hijau yang sedikit lebih gelap saat di-hover */
    border-color: #1e7e34;
}
/* --- END: CSS BARU UNTUK TOMBOL SAVE DAN NEW --- */


/* Responsiveness untuk input_data.css */
@media (max-width: 1200px) {
    .input-data-page-container {
        margin: 15px auto;
        padding: 35px 50px 45px 35px;
        gap: 0 !important; /* Set gap ke 0 untuk mengontrol jarak secara manual */
        max-width: 95%;
    }
    .input-form-section {
        padding-bottom: 0 !important; /* Reset padding-bottom di media query */
    }
    .input-form-section:last-of-type {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* PENTING: Garis pemisah untuk section INFORMASI RUANGAN di media query */
    .top-section-layout {
        border-bottom: 2px solid #007bff !important; /* Garis pemisah biru yang jelas */
        /* DIUBAH: Mengurangi jarak menjadi 10px */
        padding-bottom: 10px !important; /* Jarak antara input terakhir di section ini dan garis */
        margin-bottom: 10px !important; /* Jarak antara garis dan section "DATA RUANGAN" berikutnya */
    }

    /* Override default .input-row behavior for medium screens */
    .input-row {
        flex-wrap: wrap; /* Izinkan wrapping pada medium screen */
    }

    /* NEW: Responsiveness untuk header section dengan select di samping judul */
    .section-header-with-select {
        flex-direction: column; /* Tumpuk vertikal di medium screen */
        align-items: flex-start; /* Judul dan select rata kiri */
        margin-bottom: 10px;
        padding-bottom: 5px;
    }

    .section-header-with-select .select-existing-room-container {
        width: 100%; /* Ambil lebar penuh */
        max-width: none; /* Hapus batasan max-width di mobile */
        min-width: unset; /* Hapus batasan min-width di mobile */
        margin-left: 0;
        margin-top: 10px; /* Jarak antara judul dan select */
    }
    .section-header-with-select .select-existing-room-container .input-wrapper {
        height: auto; /* Biarkan tinggi menyesuaikan konten */
    }
    .section-header-with-select .select-existing-room-container .input-wrapper select {
        width: 100%;
        font-size: 0.8em;
    }

    /* Responsiveness: Reset margin-top for excel-upload-section.compact on medium screens */
    .excel-upload-section.compact {
        margin-top: 0;
    }


    /* Responsiveness untuk INFORMASI RUANGAN */
    .inspection-info-section .input-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }
    .inspection-info-section .input-row > .input-field-with-unit {
        flex: 1 1 calc(50% - 10px); /* 2 kolom pada medium screen */
        min-width: unset;
    }
    .inspection-info-section .input-row > .input-field-with-unit.gedung-ruangan-field,
    .inspection-info-section .input-row > .input-field-with-unit.type-fungsi-field {
        flex-grow: 1;
        min-width: unset;
    }

    /* --- DATA RUANGAN (medium screens) --- */
    .ruangan-section {
        border-top: none !important; /* Pastikan tidak ada border-top */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .ruangan-section .input-row.all-ruangan-inputs {
        flex-wrap: wrap;
    }
    .ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit {
        flex: 1 1 calc(33.333% - 10px); /* 3 kolom pada medium screen */
        min-width: unset;
    }
    .ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit.kondisi-ruangan-field {
        flex: 1 1 calc(66.666% - 10px); /* 2/3 lebar untuk Kondisi Ruangan */
        min-width: unset;
    }

    /* --- Responsiveness untuk DATA PENERANGAN (medium screens) --- */
    .lampu-section .input-row.all-lampu-inputs {
        flex-wrap: wrap;
        align-items: flex-start; /* Mengembalikan ke flex-start untuk mobile agar tidak aneh */
    }
    .lampu-section .input-row.all-lampu-inputs .input-field-with-unit {
        flex: 1 1 calc(33.333% - 10px); /* 3 kolom pada medium screen */
        min-width: unset;
    }
    .lampu-section .input-row.all-lampu-inputs .input-field-with-unit:nth-child(1) { /* Jenis Lampu */
        flex: 1 1 calc(50% - 10px); /* Lebih lebar */
        min-width: unset;
    }


    /* --- Responsiveness untuk DATA PENDINGIN (medium screens) --- */
    .ac-section .input-row.all-ac-inputs {
        flex-wrap: wrap;
        align-items: flex-start; /* Mengembalikan ke flex-start untuk mobile agar tidak aneh */
    }
    .ac-section .input-row.all-ac-inputs .input-field-with-unit {
        flex: 1 1 calc(25% - 10px); /* 4 kolom pada medium screen */
        min-width: unset;
    }
    .ac-section .input-row.all-ac-inputs .input-field-with-unit:nth-child(1), /* Jenis AC */
    .ac-section .input-row.all-ac-inputs .input-field-with-unit:nth-child(2) { /* Merk AC */
        flex: 1 1 calc(33.333% - 10px); /* Lebih lebar */
        min-width: unset;
    }
    .ac-section .input-row.all-ac-inputs .input-field-with-unit.ac-small-field {
        flex: 1 1 calc(20% - 10px); /* Lebih kecil */
        min-width: unset;
    }

    /* --- Responsiveness untuk DATA PERALATAN (medium screens) --- */
    .elektronik-section .input-row.all-elektronik-inputs {
        flex-wrap: wrap;
        align-items: flex-start; /* Mengembalikan ke flex-start untuk mobile agar tidak aneh */
    }
    .elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit {
        flex: 1 1 calc(33.333% - 10px); /* 3 kolom pada medium screen */
        min-width: unset;
    }
    .elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(1) { /* Jenis Alat */
        flex: 1 1 calc(50% - 10px); /* Lebih lebar */
        min-width: unset;
    }
    .elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(2) { /* Type */
        flex: 1 1 calc(50% - 10px); /* Lebih lebar */
        min-width: unset;
    }


    /* Tombol Add */
    .add-button {
        flex-shrink: 0;
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    /* Responsive adjustments for top-section-layout on small screens */
    .top-section-layout {
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Stretch items to full width */
    }

    .excel-upload-section.compact,
    .inspection-info-section {
        width: 100%;
        margin-bottom: 20px; /* Add space between stacked sections */
    }

    /* PENTING: Reset margin-top untuk excel-upload-section.compact pada layar kecil */
    .excel-upload-section.compact {
        margin-top: 0; /* Reset margin-top di mobile agar tidak ada offset */
    }

    .input-data-page-container {
        margin: 0 !important;
        padding: 15px !important;
        gap: 0 !important; /* Set gap ke 0 untuk mengontrol jarak secara manual */
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* PENTING: Garis pemisah untuk section INFORMASI RUANGAN di mobile media query */
    .top-section-layout {
        border-bottom: 2px solid #007bff !important; /* Garis pemisah biru yang jelas */
        padding-bottom: 15px !important; /* Jarak antara input terakhir di section ini dan garis */
        margin-bottom: 15px !important; /* Jarak antara garis dan section "DATA RUANGAN" berikutnya */
    }

    .input-form-section {
        width: 100% !important; /* Memastikan section mengambil lebar penuh */
        max-width: none !important;
        min-width: unset !important;
        padding: 0 !important;
        padding-bottom: 0 !important; /* Reset padding-bottom di media query */
    }
    .input-form-section:last-of-type {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    .input-form-section .form-title {
        font-size: 1.1em !important;
        margin-bottom: 10px !important;
        padding-bottom: 5px !important;
    }
    .form-group {
        width: 100% !important; /* Memastikan form-group mengambil lebar penuh */
        max-width: none !important;
        min-width: unset !important;
        margin-bottom: 5px !important;
    }
    .form-group > label {
        font-size: 0.7em !important; /* Ukuran font label utama mobile diperkecil */
        margin-bottom: 2px !important;
    }
    .input-row {
        width: 100% !important; /* Memastikan input-row mengambil lebar penuh */
        max-width: none !important;
        min-width: unset !important;
        flex-direction: column !important;
        gap: 5px !important;
        flex-wrap: nowrap !important; /* Menjadi nowrap untuk flex-direction column */
    }
    .input-field-with-unit {
        min-width: unset !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-bottom: 0 !important;
    }
    .input-field-with-unit label {
        font-size: 0.7em !important; /* Ukuran sub-label mobile diperkecil */
        margin-bottom: 0px !important;
    }
    
    /* Force input-wrapper to take full width */
    .input-wrapper {
        width: 100% !important;
        flex-grow: 1 !important;
        justify-content: flex-start !important; /* Keep left-aligned for mobile */
        background-color: #fdfdfd !important; /* Memastikan input-wrapper tetap light off-white */
    }

    /* Target all input and select elements directly within input-wrapper */
    .input-wrapper input[type="text"],
    .input-wrapper select {
        flex-grow: 1 !important; /* Make them grow to fill available space */
        flex-shrink: 1 !important; /* Allow them to shrink */
        flex-basis: auto !important; /* Let content determine initial size */
        width: auto !important; /* Let flex handle width */
        max-width: none !important; /* Remove any max-width constraints */
        text-align: left !important; /* Default to left align */
        min-width: 0 !important; /* Ensure no minimum width prevents shrinking */
        font-size: 0.75em !important; /* Ukuran teks input/select/unit mobile diperkecil lagi */
        padding: 4px 6px !important;
        height: 30px !important;
        line-height: 30px !important;
        background-color: white !important; /* Latar belakang input field menjadi putih solid */
    }

    /* Ensure the unit span does not take up too much space */
    .input-wrapper .unit {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        white-space: nowrap !important;
        min-width: unset !important;
        font-size: 0.75em !important; /* Ukuran teks input/select/unit mobile diperkecil lagi */
        padding: 4px 6px !important; /* Padding disesuaikan */
        background-color: #e9ecef !important; /* Background abu-abu untuk unit */
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
        border-left: 1px solid #ccc !important;
    }

    /* Override for 'Type' field on mobile (already left-aligned, but ensure flex properties) */
    .elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit:nth-child(2) .input-wrapper input[type="text"] {
        flex-grow: 1 !important;
        max-width: none !important;
        width: auto !important;
        text-align: left !important;
    }

    .input-wrapper select {
        padding-right: 20px !important;
        background-size: 10px !important;
    }

    /* Responsiveness untuk semua kelompok input yang digabung (mobile screens) */
    .ruangan-section .input-row.all-ruangan-inputs,
    .lampu-section .input-row.all-lampu-inputs,
    .ac-section .input-row.all-ac-inputs,
    .elektronik-section .input-row.all-elektronik-inputs {
        flex-direction: column !important; /* Tumpuk vertikal di mobile */
        gap: 5px !important;
    }
    .ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit,
    .lampu-section .input-row.all-lampu-inputs .input-field-with-unit,
    .ac-section .input-row.all-ac-inputs .input-field-with-unit,
    .elektronik-section .input-row.all-elektronik-inputs .input-field-with-unit {
        flex: 1 1 100% !important; /* Ambil lebar penuh */
        min-width: unset !important;
    }
    .ruangan-section .input-row.all-ruangan-inputs .input-field-with-unit.kondisi-ruangan-field {
        flex: 1 1 100% !important; /* Ambil lebar penuh */
        min-width: unset !important;
    }

    /* Tombol Add */
    .add-button {
        width: 100% !important;
        margin-top: 5px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 0.9em !important;
        flex: 1 1 100% !important;
        padding: 0px 8px !important;
    }
    /* Tombol RUANGAN BARU full width di mobile */
    .action-button-container {
        padding-top: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ruangan-baru-button {
        width: 100% !important;
        font-size: 0.9em !important;
        padding: 8px 10px !important;
    }
}