/* Reset default margin dan padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Background halaman */
body {
    background: url('images/smrFarm.png') ; /*no-repeat center center/cover; */
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    /* background: #76b852; //fallback for old browsers */
    /* background: rgb(141,194,111); */
    /* background: linear-gradient(90deg, rgba(141,194,111,1) 0%, rgba(118,184,82,1) 50%); */
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* HEADER */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    padding: 15px;
    /* background: rgba(255, 255, 255, 0.2); */
    border-radius: 10px;
    /* backdrop-filter: blur(5px); */
}

.header .logo {
    width: 100px;
    height: auto;
    margin: 0 10px;
    /* Kurang ke tepi */
}

.lgo {
    display: block;
}

.header .title {
    font-size: 22px;
    font-weight: bold;
    color: rgb(252, 236, 236);
    text-align: center;
}

.txtshadow {
    margin-top: 2rem;
    text-shadow:
        2px 2px 4px rgb(100, 78, 78),
        0 0 1.4em rgb(25, 25, 26),
        0 0 1em rgb(30, 30, 31);
    color: rgb(245, 243, 243);
    font:
        1.5emrgb(0, 0, 0)gia,
        serif;
}


/* TOMBOL NAVIGASI - ELEGAN DENGAN GRADASI */
.nav-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.nav-buttons button {
    width: 120px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(45deg, #3498db, #1e88e5);
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover efek */
.nav-buttons button:hover {
    background: linear-gradient(45deg, #1e88e5, #1565c0);
    transform: scale(1.05);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

/* TOMBOL LOG OUT (Warna Merah) */
.nav-buttons .logout {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
}

.nav-buttons .logout:hover {
    background: linear-gradient(45deg, #c0392b, #a93226);
}

/* TOMBOL AKTIF */
.nav-buttons .active {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    /* Warna hijau */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3),
        inset -2px -2px 5px rgba(255, 255, 255, 0.5);
}

.nv {
    display: none;
}

.naAtas {
    background: #e4e1e115;
    margin: 0;
    padding: 10px 10px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.nvcontain {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu1 {
    margin: 0;
    display: flex;
    list-style: none;
    padding: 0;
}

.menu1 li {
    padding-left: 0;
    margin-right: 10px;
}

.menu1 li a {
    padding: 10px;
    color: rgb(243 237 237);
    text-decoration: none;
    display: inline-block;
}

.tbl {
    display: none;
    color: rgb(245, 3, 3);
    font-size: 14pt;
}

.tbl:hover {
    cursor: pointer;
}



/* Tombol Hamburger (☰ Menu) */
.menu-toggle {
    display: none;
    /* Default disembunyikan */
    background: #007BFF;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
}

/* Navigasi */
.nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

/* Responsive: Jika layar kecil, sembunyikan navigasi & tampilkan tombol menu */



/* CARD MONITORING - 3D EFFECT */
/* CARD MONITORING - DENGAN HEADER */
.card-container {
    margin-top: 20px;
    display: flex;
    gap: 5px;
    width: 80%;
    flex-direction: row;
    justify-content:space-around;
}

.card {
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    border-radius: 10px;
    width: 275px;
    text-align: center;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3),
        -4px -4px 10px rgba(255, 255, 255, 0.8);
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

/* HEADER CARD */
.card-header {
    background: linear-gradient(45deg, #2c3e50, #34495e);
    color: white;
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
}

/* ISI CARD */
.card-body {
    padding: 15px;
    font-size: 20px;
    color: #333;
    font-weight: bold;
}

/* Efek hover */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4),
        -6px -6px 15px rgba(255, 255, 255, 0.9);
}


/* FORM PENCARIAN */
.search-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.coltg {
    width: 35%;
}

.coltb {
    width: 20%;
    display: flex;
}

.search-container label {
    font-weight: bold;
    color: rgb(0, 0, 0);
}

.search-container input,
.search-container button {
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 85%;
    margin: auto;
}

.search-container button {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white;
    cursor: pointer;
    border: none;
}

.search-container button:hover {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
}

/* KETERANGAN TANGGAL */
.date-info {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* BACKGROUND TABEL */
.table-container {
    margin-top: 20px;
    width: 90%;
    /* max-width: 800px; */
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Bungkus tabel supaya responsif */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* Scroll horizontal jika layar kecil */
    background: rgba(247, 244, 244, 0.699);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Styling Tabel */
#logTable {
    width: 100%;
    min-width: 1100px; /* Agar tabel tetap bisa terbaca */
    border-collapse: collapse;
}

/* Header Tabel */
#logTable th {
    background: #007bffdc;
    color: white;
    padding: 10px;
    text-align: center;
}

/* Isi Tabel */
#logTable td {
    padding: 8px;
    text-align: center;
    border: 1px solid #eaf77ea2;
}

/* Alternating Row Color */
#logTable tr:nth-child(even) {
    background: #f1ad47be;
}





@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
    }
    .search-container{
        flex-direction: column;
    }
    .menu-toggle {
        display: block;
        /* Tampilkan tombol hamburger */
    }

    .lgo {
        display: none;
    }

    .card-container {
        flex-direction: column;
    }

    .card {
        width: 100%;
    }

    .coltg {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .coltb {
        width: 100%;
        align-items: center;
    }

    .nav-container {
        display: none;
        /* Sembunyikan navigasi */
        flex-direction: column;
        align-items: center;
        width: 100%;
        background: white;
        position: absolute;
        top: 50px;
        /* Geser ke bawah setelah tombol menu */
        left: 0;
        padding: 10px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    }

    .nav-container button {
        width: 90%;
        /* Tombol penuh */
        text-align: left;
    }

    .nv {
        display: block;
    }

    .menu1 {
        display: none;
    }

    .menu1.aktif {
        display: inline-block;
        position: absolute;
        top: 64px;
        background: #212121;
        padding: 10px 20px;
        right: 0;
        left: -240px;
    }

    .menu1.aktif li a {
        padding: 10px;
        display: inline-block !important;
    }

    .tbl {
        display: block;
    }
}