/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e0f7fa; /* Background biru muda */
    padding-top: 60px; /* Menyesuaikan tinggi navbar */
}
.btn {
    border-radius: 5px; /* Membuat tombol sedikit membulat */
    font-weight: bold; /* Membuat teks tombol lebih tebal */
}

/* Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Navbar full width */
    background-color: #333; /* Warna hitam abu-abu */
    padding: 10px 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.navbar a {
    color: white; /* Teks putih */
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px; /* Ukuran teks standar */
}

.navbar a:hover, .navbar a.active {
    background-color: #575757; /* Warna abu-abu saat hover atau aktif */
    border-radius: 5px;
}

/* Form Container Styles */
.form-container {
    max-width: 80%; /* Menyesuaikan lebar container */
    margin: 20px auto; /* Pusatkan form */
    background-color: #007bff; /* Biru terang */
    padding: 20px;
    border-radius: 10px; /* Sudut melengkung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
    color: white; /* Teks putih */
}

form label {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
}

form input, form select, form button {
    width: 100%; /* Lebar penuh */
    padding: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 5px; /* Sudut melengkung */
    border: none;
    border-bottom: 2px solid #007bff; /* Garis bawah biru lebih tebal */
}

form button {
    background-color: #4caf50; /* Hijau */
    color: white; /* Teks putih */
    cursor: pointer;
}

form button:hover {
    background-color: #45a049; /* Hijau lebih gelap saat hover */
}

/* Grid untuk Titik */
.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Kolom fleksibel */
    gap: 20px; /* Jarak antar elemen */
    margin-top: 20px; /* Jarak atas grid */
}
select:hover, select:focus {
    border: 1px solid #007bff; /* Warna border biru saat hover/fokus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Efek bayangan */
}
/* Kotak Titik */
.input-box {
    background-color: #0059b3; /* Warna latar biru */
    padding: 15px;
    border-radius: 10px; /* Sudut melengkung */
    text-align: center;
    color: white; /* Teks putih */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}
select {
    background-color: #e0f7fa; /* Latar belakang biru muda */
    border: 2px solid #007bff; /* Border biru */
    color: #007bff; /* Teks biru */
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
}

/* Label dalam Kotak Titik */
.input-box label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

/* Input dalam Kotak Titik */
.input-box input {
    width: 100%; /* Lebar penuh */
    padding: 8px;
    margin-bottom: 10px; /* Jarak antar input */
    font-size: 14px;
    border-radius: 5px; /* Sudut melengkung */
    border: 1px solid #ccc; /* Border abu-abu terang */
    text-align: center; /* Teks di tengah */
}

/* Heading untuk Titik */
.point-label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Chart Container Styles */
.chart-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Spasi antar grafik */
    margin-top: 20px;
}

.chart-box {
    width: 40%; /* Lebar masing-masing grafik */
    background-color: white; /* Background putih */
    padding: 10px;
    border-radius: 10px; /* Sudut melengkung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}

.chart-box canvas {
    display: block;
    margin: auto;
    max-width: 100%; /* Responsif */
    height: auto;
}

/* Table Styles */
.table-container {
    margin-top: 20px;
    overflow-x: auto; /* Scroll horizontal jika tabel terlalu lebar */
}

.table {
    width: 100%; /* Lebar penuh */
    border-collapse: collapse; /* Hilangkan spasi antar border */
    margin: 0 auto;
    background-color: white; /* Background putih */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}

.table th, table td {
    padding: 10px; /* Padding dalam cell */
    text-align: center; /* Teks rata tengah */
    border: 1px solid #ddd; /* Border abu-abu terang */
}

.table th {
    background-color: #0056b3; /* Background biru gelap */
    color: white; /* Teks putih */
}

.table td input[type="number"] {
    width: 70%; /* Lebar input dalam tabel */
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc; /* Border abu-abu terang */
    border-radius: 5px; /* Sudut melengkung */
}

/* Filter Form Styles */
.filter-form {
    display: grid; /* Atur tata letak dalam grid */
    grid-template-columns: auto auto; /* Dua kolom untuk label dan select */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 10px; /* Jarak antar elemen */
    justify-content: start; /* Rapatkan elemen ke sisi kiri */
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px; /* Batasi lebar maksimal form */
}

.filter-form label, .filter-form select, .filter-form button {
    flex: 1; /* Ukuran fleksibel */
    min-width: 150px; /* Ukuran minimum */
    font-size: 14px;
    margin-right: 5px; /* Rapatkan label dengan elemen select */
}

/* Responsive Design */
@media (max-width: 768px) {
    .chart-container {
        flex-direction: column; /* Grafik vertikal */
        align-items: center;
    }

    .chart-box {
        width: 90%; /* Grafik lebih kecil */
    }

    .form-container {
        max-width: 90%; /* Lebar form lebih kecil */
    }

    .input-grid {
        grid-template-columns: 1fr; /* Semua elemen dalam satu kolom */
    }
}

/* User Profile Styles */
.navbar ul {
    display: flex;
    justify-content: flex-start; /* Rapatkan menu ke kiri */
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar ul li {
    margin-right: 20px; /* Jarak antar menu */
}

.navbar ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
}

.navbar ul li a:hover, .navbar ul li a.active {
    background-color: #575757;
}

/* Profil User Styles */
.user-profile {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.user-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}
/* Dropdown Styling */
select, input[type="text"] {
    background-color: #ffffff; /* Warna putih untuk input */
    border: 1px solid #ccc; /* Border abu-abu terang */
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
    color: #333; /* Warna teks lebih gelap */
    outline: none; /* Hilangkan outline default */
}
.dropdown {
    position: relative;
}

.dropdown-btn {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    min-width: 150px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}

.dropdown-content a {
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Form Edit_Material */
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .form-container h1 {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .input-box label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
            font-weight: bold;
            color: #555;
        }

        .input-box textarea {
            width: 100%;
            padding: 8px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .textarea {
            resize: none;
        }

        .button {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

        .button:hover {
            background-color: #0056b3;
        }
        .container {
            background-color: #ffffff; /* Warna putih untuk container utama */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .select, input[type="text"] {
            background-color: #ffffff; /* Warna putih untuk input */
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            outline: none;
        }