* {
    padding:0;
    margin:0;
    font-family: 'Quicksand', sans-serif;
}
body {
    background-color: #f8f8f8;
}
.bglogin {
    background-image: url('../img/admin.jpg');/* keluar dulu dari folder css krn gambar tidak disana */
    background-size: cover; /* Mengatur gambar agar menutupi seluruh latar belakang */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar */
    background-position: center; /* Memusatkan gambar */
}
.bglogin1 {
    background-image: url('../img/login.jpg');/* keluar dulu dari folder css krn gambar tidak disana */
    background-size: cover; /* Mengatur gambar agar menutupi seluruh latar belakang */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar */
    background-position: center; /* Memusatkan gambar */
}
.bgdaftar {
    background-image: url('../img/daftar.jpg');/* keluar dulu dari folder css krn gambar tidak disana */
    background-size: cover; /* Mengatur gambar agar menutupi seluruh latar belakang */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar */
    background-position: center; /* Memusatkan gambar */
}
a {
    color: inherit;
    text-decoration: none;
}
#bg-login {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.box-login {
    width: 400px; /* Mengubah lebar kotak login */
    min-height: 300px; /* Mengubah tinggi minimum kotak login */
    border: 1px solid #ccc;
    background-color: #ffffff; /* Mengatur warna latar belakang menjadi putih */
    padding: 40px;
    box-sizing: border-box;
    border-radius: 10px; /* Sudut melengkung untuk kotak login */
}
.login-icon {
    display: block; /* Mengatur gambar sebagai blok */
    margin: 0 auto 20px; /* Memusatkan gambar dan menambahkan margin bawah */
    width: 120px; /* Mengatur lebar gambar */
    height: auto; /* Mengatur tinggi gambar secara otomatis untuk menjaga proporsi */
}
.input-control {
    width: 100%; /* Pastikan kolom input juga 100% */
    padding: 10px;
    margin: 20px 0 15px; /* Menambahkan margin atas 20px untuk memindahkan kolom input ke bawah */
    box-sizing: border-box;
    border-radius: 5px; /* Mengatur sudut melengkung pada kolom input */
    border: 1px solid #ccc; /* Menambahkan border untuk kolom input */
}
.btn {
    padding: 10px 20px; /* Menambah padding untuk memperlebar tombol */
    background-color: #328bff; /* Warna latar belakang normal */
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 100%; /* Mengatur lebar tombol agar sama dengan kolom input */
    transition: background-color 0.2s ease; /* Transisi untuk efek perubahan warna */
    margin-top: 15px; /* Menambahkan margin atas untuk memindahkan tombol ke bawah */
}

.btn:hover {
    opacity: 0.8; /* Mengatur transparansi saat hover */
}
.btna {
    padding: 10px 20px; /* Menambah padding untuk memperlebar tombol */
    background-color: #08d13e; /* Warna latar belakang normal */
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 100%; /* Mengatur lebar tombol agar sama dengan kolom input */
    transition: background-color 0.2s ease; /* Transisi untuk efek perubahan warna */
    margin-top: 15px; /* Menambahkan margin atas untuk memindahkan tombol ke bawah */
}

.btna:hover {
    opacity: 0.8; /* Mengatur transparansi saat hover */
}
header {
    background-color: #328bff;
    color: #fff;
}
header h1 {
    float: left;
    padding:10px 0;
}
h3{
    color: white;
}
h4{
    color: white;
}
.logo {
    height: 50px; /* Mengatur tinggi gambar */
    width: auto; /* Mengatur lebar gambar secara otomatis untuk menjaga proporsi */
    display: block; /* Mengatur gambar sebagai blok */
    margin: 0 auto; /* Memusatkan gambar secara horizontal */
}
header ul {
    float: right;
}
header ul li {
    display: inline-block;
}
header ul li a {
    padding:20px 0 20px 15px;
    display: inline-block;
}
footer {
    padding:25px 0;
    color: white;
}
.container {
    width: 80%;
    margin:0 auto;
}
.container:after {
    content: '';
    display: block;
    clear: both;
}
.section {
    padding:25px 0;
    flex-grow: 1; /* Ini akan membuat section meregang mengisi ruang kosong */
}
.box1 {
    background-color: rgba(255, 255, 255, 0);
    border:1px solid rgba(255, 255, 255, 0);
    padding:15px;
    box-sizing: border-box;
    margin:10px 0 25px 0;
}
.box {
    background-color: #fff;
    border:1px solid #ccc;
    padding:15px;
    box-sizing: border-box;
    margin:10px 0 25px 0;
}
.box:after {
    content: '';
    display: block;
    clear: both;
}
.tambah-data {
    background-color: #328bff; /* Warna latar belakang normal */
    color: white; /* Mengatur warna teks menjadi putih */
    padding: 10px 15px; /* Menambahkan padding untuk tampilan tombol */
    border: none; /* Menghilangkan border */
    border-radius: 5px; /* Membuat sudut tombol menjadi melengkung */
    text-decoration: none; /* Menghilangkan garis bawah pada link */
    display: inline-block; /* Mengatur tampilan menjadi inline-block */
    margin-bottom: 20px; /* Menambahkan jarak di bawah tombol */
}

.tambah-data:hover {
    opacity: 0.8; /* Mengatur transparansi saat hover */
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th {
    background-color: #328bff; /* Mengatur warna latar belakang menjadi hijau */
    color: white; /* Mengatur warna teks menjadi putih untuk kontras yang baik */
}
.table tr {
    height: 30px;
}
.table tr td {
    padding:5px 10px;
    height: 30px; /* Tinggi sel lebih besar */
    text-align: center;
}
.search {
    padding:15px 0;
    border:1px solid rgba(255, 255, 255, 0);
    text-align: center;
    background-color: rgba(255, 255, 255, 0); /* Transparan 100% */
    margin: 20px; /* Margin di luar kotak pencarian */
}
.search input[type=text] {
    width: 60%;
    padding:10px;
}
.search input[type=submit] {
    padding:12px 15px;
    background-color: #328bff;
    color:#fff;
    border:none;
    cursor: pointer;
}
.col-5 {
    width:20%;
    height:100px;
    text-align: center;
    float: left;
    padding:10px;
    box-sizing: border-box;
}
.col-4 {
    width:25%;
    height: 320px;
    border:1px solid #ccc;
    float: left;
    padding:10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.col-4:hover {
    box-shadow: 0 0 3px #999;
}
.col-4 img {
    width: 50%;
}
.col-4 .nama {
    font-weight: bold;
    color: #328bff;
    margin-bottom: 5px;
}
.col-4 .harga {
    font-weight: bold;
    color:#FF0000;
    float: right;
}
.footer {
    padding:25px 0;
    background-color: #333;
    color: #fff;
    text-align: center;
}
.footer p {
    margin-bottom: 10px;
}
.footer small {
    margin-top: 25px;
    display: inline-block;
}
.col-2 {
    width: 50%;
    min-height: 200px;
    padding:10px;
    box-sizing: border-box;
    float: left;
}
.col-2 img {
    border:1px solid #f9f9f9;
    padding:5px;
    box-sizing: border-box;
}
.col-2 h3 {
    margin-bottom: 10px;
}
.col-2 h4 {
    color: #328bff;
}
.col-2 p {
    margin:15px 0;
    text-align: justify;
    line-height: 25px;
    font-size:14px;
}

@media screen and (max-width: 768px){
    .container {
        width: 90%;
    }
    .col-5 {
        width:50%;
        margin-bottom: 10px;
    }
    .col-4 {
        width: 50%;
        height: 300px;
    }
    .col-2 {
        width:100%;
    }
}
/* Gaya untuk tombol hapus */
.btn-hapus {
    background-color: #dc3545; /* Red color for delete button */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px; /* Diatur untuk keselarasan di penjualan.php */
}
.btn-hapus:hover {
    background-color: #c82333;
}

/* Gaya untuk tombol edit */
.btn-edit1 {
    color: white; /* Warna teks */
    background-color: #FFC107; /* Warna latar belakang merah */
    padding: 5px 10px; /* Padding untuk tombol */
    text-decoration: none; /* Menghilangkan garis bawah */
    border-radius: 5px; /* Sudut melengkung */
}

.btn-edit1:hover {
    background-color: #E0A800; /* Warna saat hover */
}
.bgadmin1 {
    background-image: url('../img/bgadmin.jpg'); /* keluar dulu dari folder css krn gambar tidak disana */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* Ganti height jadi min-height */
    width: 100%;
    /* Tambahkan ini untuk Flexbox */
    display: flex;
    flex-direction: column;
}
.bguser1 {
    background-image: url('../img/bguser.jpg'); /* keluar dulu dari folder css krn gambar tidak disana */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* Ganti height jadi min-height */
    width: 100%;
    /* Tambahkan ini untuk Flexbox */
    display: flex;
    flex-direction: column;
}

/* luas lahan atau permukaan, jika terlalu kecil maka hasilnya rapet/kerep" */
.col-99 {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    float: left; /* Jika ingin baris horizontal */
    width: 190px;
}

/* Kartu umum background*/
.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    width: 170px;
}

/* Header kartu kolom atas ijo*/
.card-header {
    background-color: #28a745; /* Hijau mirip bg-success */
    color: white;
    padding: 10px;
    font-weight: bold;
    width: 170px;
}

/* Teks paragraf dalam header kolom bawah*/
.card-text {
    margin: 0;
    font-size: 16px;
    color: white;
    width: 170px;
}

/* Isi kartu */
.card-body {
    padding: 15px;
}

/* Judul (angka) */
.card-title {
    font-size: 24px;
    margin: 0;
    color: #333;
}

/* Gaya tambahan untuk tabel penjualan (sudah ada di penjualan.php, saya pindahkan ke sini) */
.table-penjualan {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.table-penjualan th, .table-penjualan td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
}
.table-penjualan th {
    background-color: #328bff;
    color: #fff;
}
.status-0 { color: orange; font-weight: bold; } /* Menunggu Konfirmasi */
.status-1 { color: green; font-weight: bold; }  /* Lunas */
.status-2 { color: red; font-weight: bold; }    /* Dibatalkan */

.status-form {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px; /* Tambahkan sedikit margin bawah */
}
.status-form select {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.status-form button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.status-form button:hover {
    background-color: #0056b3;
}
.btn-lihat-bukti {
    background-color: #28a745; /* Green color for view button */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 5px; /* Margin bawah untuk tombol hapus */
}
.btn-lihat-bukti:hover {
    background-color: #218838;
}
/* Gaya untuk tombol hapus di penjualan.php */
/* Sudah didefinisikan di atas, ini untuk memastikan tidak ada duplikasi dan konsistensi */
/* .btn-hapus {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
}
.btn-hapus:hover {
    background-color: #c82333;
} */


/* Gaya tambahan untuk tabel pesanan */
.table-pesanan {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.table-pesanan th, .table-pesanan td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
}
.table-pesanan th {
    background-color: #328bff;
    color: #fff;
}
.status-0 { color: orange; font-weight: bold; }
.status-1 { color: green; font-weight: bold; }
.status-2 { color: red; font-weight: bold; }

.upload-form-container {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    /* Tambahkan properti untuk tata letak yang lebih baik di dalam sel tabel */
    position: absolute; /* Untuk memungkinkan penempatan form di atas konten lain jika perlu */
    z-index: 10; /* Pastikan form muncul di atas */
    max-width: 250px; /* Batasi lebar form upload */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Efek bayangan */
}
.upload-form-container input[type="file"],
.upload-form-container input[type="submit"] {
    margin-top: 5px;
}
.upload-form-container .input-control {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
/* Style untuk tombol aksi */
.action-button {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: none; /* Untuk tombol print yang mungkin berupa link */
    color: #fff;
}
.btn-upload {
    background-color: #007bff; /* Warna biru */
}
.btn-print {
    background-color: #28a745; /* Warna hijau */
}
.btn-cancel {
    background-color: #dc3545; /* Warna merah */
}
.action-cell {
    display: flex; /* Menggunakan Flexbox */
    flex-direction: column; /* Mengatur item dalam kolom */
    align-items: flex-end; /* Memindahkan semua item ke kanan */
    gap: 5px; /* Jarak antar item */
}
.status-form {
    width: 100%; /* Agar form mengambil lebar penuh kolom */
    justify-content: flex-start; /* Menggeser isi form ke kiri */
}
.status-form select, .status-form button {
    width: auto; /* Pastikan elemen di dalam form status tidak terlalu lebar */
}
.btn-hapus {
    margin-top: 0; /* Menghilangkan margin-top yang sebelumnya ditambahkan, karena gap akan menangani jarak */
}
/* Gaya untuk link spesifik yang baru ditambahkan */
.box p a[href="jual.php?action=list"],
.box p a[href="jual.php?action=new"],
.garansi-detail p a[href="jual.php?action=list"],
.garansi-detail p a[href="jual.php?action=new"],
.garansi-detail p a[href^="unit_submissions/"] /* Untuk link "Lihat Gambar Lebih Besar" */
{
    color: #007bff; /* Warna biru */
    text-decoration: underline; /* Tambahkan garis bawah */
}