/* Import Google Fonts for a more distinct look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* General Body & Container Styling */
html, body { /* Tambahkan html di sini untuk kontrol overflow yang lebih baik */
    overflow-x: hidden; /* Menyembunyikan scrollbar horizontal di level paling atas */
}
body {
    font-family: 'Poppins', sans-serif; /* Modern, clean font */
    margin: 0;
    padding: 0; /* Remove padding here, use on container */
    background: linear-gradient(135deg, #a7d9f7 0%, #dbe9f6 100%); /* Vibrant blue-to-light-blue gradient */
    color: #2c3e50; /* Darker, sophisticated text color */
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align content to the top */
    min-height: 100vh; /* Full viewport height */
    box-sizing: border-box; /* Include padding in element's total width and height */
    /* overflow-x: hidden; Dipindahkan ke html, body */
}

.container {
    max-width: 1200px; /* Lebarkan container untuk layout berdampingan */
    width: 95%; /* Ensure it takes full width on smaller screens */
    margin: 30px auto; /* More margin */
    background-color: #ffffff;
    padding: 40px; /* More padding */
    border-radius: 16px; /* Even softer rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Deeper, more noticeable shadow */
    transition: all 0.3s ease; /* Smooth transition for container */
}

/* Header Styling */
.header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0eaf4; /* Subtle separator */
}

.header h1 {
    font-size: 3.2em; /* Even larger heading */
    color: #1e90ff; /* Royal blue */
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: -1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Text shadow for depth */
}

/* Navigation Links (Hidden on index.php, but styled here for settings.php) */
.nav-links {
    text-align: center;
    margin-bottom: 40px;
    display: flex; /* Use flexbox for alignment */
    justify-content: center;
    gap: 20px; /* Space between links */
}

.nav-links a {
    background-color: #4CAF50; /* Fresh green */
    color: white;
    padding: 12px 25px; /* More padding */
    border-radius: 30px; /* Pill-shaped buttons */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    box-shadow: 0 6px 15px rgba(0, 128, 0, 0.25); /* Green shadow */
    transition: all 0.3s ease;
}

.nav-links a:hover {
    background-color: #45a049;
    transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
    box-shadow: 0 8px 20px rgba(0, 128, 0, 0.35);
}

/* Card Styling - General */
.card {
    background-color: #fcfdff; /* Very light, almost white */
    padding: 20px; /* More generous padding */
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Softer, deeper shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transition */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e7f1; /* Subtle border */
    box-sizing: border-box; /* Pastikan box-sizing konsisten untuk semua kartu */
    word-wrap: break-word; /* Pastikan teks panjang dibungkus */
    word-break: break-word; /* Untuk kata yang sangat panjang */
}

.card:hover {
    transform: translateY(-5px) scale(1.01); /* Lift card on hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    background-color: #f2f7fc; /* Slight background change on hover */
}

.card h3 {
    font-size: 1.2em; /* Larger heading in cards */
    color: #4a658a; /* Deeper blue-grey */
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase; /* Uppercase for headings */
}

.card .value {
    font-size: 2.8em; /* Even larger value font */
    font-weight: 700;
    color: #1e90ff; /* Primary royal blue for main values */
    margin-top: 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); /* Subtle text shadow */
}

/* Specific Card Styles (Temperature & Time) */
.card.main-temp {
    background: linear-gradient(45deg, #b0e0e6, #87ceeb); /* Gradient for temp cards */
    color: #005f73;
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.2);
    padding: 15px; /* Sedikit perkecil padding */
}
.card.main-temp h3 {
    font-size: 0.9em; /* Perkecil judul suhu */
    margin-bottom: 5px;
}
.card.main-temp .value {
    font-size: 2.2em; /* Perkecil nilai suhu */
    color: #003344; /* Darker value for contrast */
    margin-top: 0px; /* Kurangi margin atas */
}


.card.main-time {
    background: linear-gradient(45deg, #c3e6f9, #9acafb); /* Gradient for time card */
    color: #0d47a1;
    box-shadow: 0 8px 25px rgba(30, 144, 255, 0.2);
    padding: 15px; /* Sedikit perkecil padding */
}
.card.main-time h3 {
    font-size: 0.9em; /* Perkecil judul waktu */
    margin-bottom: 5px;
}
.card.main-time .value {
    font-size: 1.5em; /* Perkecil nilai waktu */
    color: #002b5c;
    margin-top: 0px; /* Kurangi margin atas */
}


.card.notes-card {
    background: linear-gradient(135deg, #fefeff, #eef3f8); /* Subtle gradient for notes */
    text-align: left;
    padding: 25px; /* More padding */
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.08); /* Stronger inner shadow */
    border: 1px dashed #d1e2f4; /* Dashed border for visual interest */
}

.card.notes-card h3 {
    text-align: center;
    color: #2c3e50;
    font-size: 1.3em;
    margin-bottom: 15px;
}

.card.notes-card pre {
    white-space: pre-wrap;
    word-wrap: break-word; /* Pastikan pembungkus teks untuk pre */
    font-family: 'Roboto Mono', monospace; /* Monospace font for notes */
    margin: 10px 0 0 0;
    padding: 15px; /* More padding */
    background-color: #eaf1f8; /* Lighter background for the text area */
    border-radius: 8px;
    font-size: 0.95em;
    color: #4a658a;
    border: 1px solid #c8d8e6; /* Subtle border */
    max-height: 250px; /* Slightly taller for notes display */
    overflow-y: auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Inner shadow for pre tag */
}

/* --- GRID LAYOUTS UNTUK index_desktop.php (Default) --- */
/* Wrapper untuk Suhu Realtime dan Waktu Utama */
.temp-section {
    display: grid;
    grid-template-columns: 1fr; /* Default: stacked on small screens */
    gap: 20px; /* Spasi antar elemen */
    margin-bottom: 40px;
}

.main-time-row {
    grid-column: 1 / -1; /* Ambil seluruh lebar */
}

/* main-temp-row akan berdampingan di semua ukuran layar */
.main-temp-row {
    grid-column: 1 / -1; /* Ambil seluruh lebar */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Selalu 2 kolom */
    gap: 20px; /* Spasi antar kartu suhu */
}


/* Wrapper for Pagi and Sore sections */
.time-slots-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Default: stacked on small screens */
    gap: 30px; /* Space between the two main time slots */
    margin-bottom: 40px; /* Space before the notes section */
}

.time-slot-section {
    background-color: #fcfdff;
    border-radius: 16px;
    padding: 25px; /* Padding section sesi */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e0e7f1;
}

.time-slot-section h2 {
    text-align: center;
    font-size: 2em;
    color: #1e90ff;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Styles for the inner grids within each time-slot-section */
.inner-grid {
    display: grid;
    /* Default untuk layar sangat besar (desktop) - 4 kolom (SET/COOL) */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

/* Specific adjustments for rows within inner grid (to match previous card layout) */
/* Perluasan di sini untuk memastikan setiap baris memiliki 4 kolom di desktop */
.inner-grid .settings-row-1,
.inner-grid .settings-row-2 {
    grid-column: 1 / -1; /* Memastikan baris ini menempati semua kolom di inner-grid */
    display: grid; /* Re-apply grid to these rows */
    gap: 20px;
}

.inner-grid .settings-row-1 {
    grid-template-columns: repeat(4, minmax(150px, 1fr)); /* 4 kolom untuk SET/COOL (desktop) */
}

.inner-grid .settings-row-2 {
    grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 3 kolom untuk ON OFF (desktop) */
}

/* Single notes section at the very bottom */
.single-notes-section {
    grid-column: 1 / -1; /* Take full width of parent grid (container) */
    margin-top: 20px; /* Space from sections above */
}


/* Media Query for Larger Screens: Side-by-side layout for time slots */
@media (min-width: 992px) {
    .time-slots-wrapper {
        grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
        gap: 40px; /* More space between pagi and sore sections */
    }
}


/* Styles specific to settings.php (Form Page) */
.settings-form-container {
    background-color: #ffffff;
    padding: 45px;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
    margin-bottom: 50px;
    border: 1px solid #e0e7f1;
}

.settings-form h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5em;
    color: #1e90ff;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.settings-form > div { /* Ini adalah container untuk setiap baris label/input */
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; /* Gap default antara label dan input */
}

/* Styling untuk label */
.settings-form label {
    flex: 0 0 160px; /* Lebar tetap untuk label */
    max-width: 160px;
    font-weight: 600;
    color: #4a658a;
    text-align: right;
    padding-right: 10px;
    font-size: 1.05em;
}

/* Styling untuk radio button slot waktu */
.settings-form .time-slot-group {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 280px;
    justify-content: flex-start;
    gap: 25px; /* Space between radio options */
}
.settings-form .time-slot-group label {
    flex: unset;
    max-width: unset;
    margin-right: 0;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    text-align: left;
    padding-right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-form .time-slot-group input[type="radio"] {
    margin-right: 0;
    transform: scale(1.2);
    accent-color: #1e90ff;
}


/* Styling untuk input field secara umum (mengatasi kasus SET) */
.settings-form input[type="date"],
.settings-form input[type="number"],
.settings-form input[type="text"], /* Default text input */
.settings-form textarea {
    flex: 1; /* Biarkan tumbuh */
    min-width: 120px; /* Minimal 120px */
    max-width: 250px; /* Maksimal 250px, cocok untuk SET */
    padding: 15px 18px;
    border: 1px solid #cad2d9;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1.1em;
    color: #334e68;
    background-color: #fefefe;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Override untuk input teks yang lebih panjang seperti ON OFF dan Intermiten */
.settings-form input[name="set_on_off_set1"],
.settings-form input[name="set_on_off_cool"],
.settings-form input[name="intermiten"],
.settings-form textarea[name="notes"] {
    max-width: 100%; /* Bisa selebar mungkin */
    flex-grow: 1; /* Tumbuh lebih fleksibel */
    min-width: 280px; /* Minimum lebih lebar untuk ini */
}
/* Style spesifik untuk input status (A/O/M) */
.settings-form input[name$="_a"] { /* Mengakhiri dengan _a */
    max-width: 60px; /* Lebih kecil untuk A/O/M */
    text-align: center;
    text-transform: uppercase; /* Pastikan input selalu uppercase */
}


.settings-form input:focus,
.settings-form textarea:focus {
    border-color: #1e90ff;
    outline: 0;
    box-shadow: 0 0 0 0.3rem rgba(30, 144, 255, 0.3);
    background-color: #ffffff;
}

.settings-form textarea {
    min-height: 150px;
}

.settings-form button {
    width: auto;
    margin: 40px auto 0 auto;
    padding: 18px 45px;
    background-color: #007bff;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: 0.8px;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.25);
    transition: all 0.3s ease;
}

.settings-form button:hover {
    background-color: #0056b3;
    transform: translateY(-3px) scale(1.02);
    box_shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
}

/* Current Settings Display on settings.php (Ini sudah dihapus dari HTML) */
/* Style tetap ada di sini jika ada elemen serupa di masa depan */
.current-settings {
    margin-top: 50px;
    border-top: 2px solid #e0eaf4;
    padding-top: 35px;
    background-color: #fcfdff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.current-settings h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #4a658a;
    font-weight: 600;
}

.current-settings p {
    margin-bottom: 12px;
    line-height: 1.6;
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f4f8;
}
.current-settings p:last-of-type {
    border-bottom: none;
}

.current-settings p strong {
    flex-basis: 180px;
    text-align: left;
    color: #334e68;
    font-weight: 500;
}

.current-settings span {
    font-weight: 600;
    color: #1e90ff;
    flex-grow: 1;
    text-align: right;
}

.current-settings p.notes-display {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    padding-bottom: 0;
}
.current-settings p.notes-display strong {
    margin-bottom: 8px;
    flex-basis: auto;
}
.current-settings pre {
    padding: 15px;
    background-color: #eaf1f8;
    border-radius: 8px;
    font-size: 1em;
    color: #4a658a;
    border: 1px solid #c8d8e6;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
}


/* Media Queries for Responsiveness */
@media (max-width: 991px) { /* Changed from 992px to 991px for consistent breakpoint with grid */
    .container {
        padding: 30px;
    }
    .header h1 {
        font-size: 2.8em;
    }
    .settings-form h2 {
        font-size: 2.2em;
    }
    .settings-form label {
        flex-basis: 140px;
        max-width: 140px;
    }
    /* Input widths will now stack due to general rules for smaller screens */
}

/* --- Media Query KHUSUS untuk Layar Ponsel Umum (<= 767px) --- */
/* Ini sekarang akan jadi breakpoint untuk index_desktop.php agar tidak terlalu kecil */
@media (max-width: 767px) {
    /* Aturan mobile yang sebelumnya di sini akan dipindahkan ke index_mobile.php,
       atau diatur di media query yang lebih rendah jika tetap pakai satu file CSS */

    /* Namun, jika ini untuk index_desktop.php agar tampil lebih baik di tablet vertikal/layar kecil desktop */
    .container {
        padding: 25px;
        margin: 15px auto;
    }
    .header h1 {
        font-size: 2.2em;
        margin-bottom: 10px;
    }
    .time-slot-section h2 {
        font-size: 1.8em; /* Judul sesi sedikit lebih kecil */
        margin-bottom: 20px;
    }

    /* Penyesuaian grid untuk index_desktop.php agar lebih kompak di layar ~768px */
    .inner-grid {
        gap: 15px; /* Rapatkan gap sedikit */
    }
    .inner-grid .settings-row-1,
    .inner-grid .settings-row-2 {
        gap: 15px;
    }
    .inner-grid .settings-row-1 {
        grid-template-columns: repeat(2, minmax(120px, 1fr)); /* Dari 4 ke 2 kolom */
    }
    .inner-grid .settings-row-2 {
        grid-template-columns: repeat(2, minmax(150px, 1fr)); /* Dari 3 ke 2 kolom */
    }

    /* Ukuran font untuk kartu di index_desktop.php */
    .time-slot-section .card h3 {
        font-size: 0.9em;
        min-height: 2em;
    }
    .time-slot-section .card .value {
        font-size: 1.6em;
    }
    .time-slot-section .settings-row-1 .card:nth-of-type(n+5) h3,
    .time-slot-section .settings-row-2 .card h3 {
        font-size: 0.8em;
        min-height: 2em;
    }
    .time-slot-section .settings-row-1 .card:nth-of-type(n+5) .value,
    .time-slot-section .settings-row-2 .card .value {
        font-size: 1.1em;
    }
}


/* --- Media Query KHUSUS untuk index_mobile.php (Semua styling khusus mobile) --- */
/* Aturan ini TIDAK akan ada di style.css jika Anda menggunakan file CSS terpisah untuk mobile */
/* Jika Anda tetap ingin ini di style.css, maka ini akan sangat spesifik */
/* Jika Anda membuat style_mobile.css, maka ini adalah isinya */

/* Contoh bagaimana CSS untuk index_mobile.php akan terlihat */
/* Ini adalah ilustrasi. Saya akan berikan kode index_mobile.php lengkap nanti */
/* Di index_mobile.php, kita akan langsung menargetkan elemen tanpa media queries ini
   karena file tersebut hanya untuk mobile. */

/* Settings.php specific media query adjustments */
@media (max-width: 767px) { /* Ini tetap berlaku untuk settings.php di mobile */
    .settings-form h2 {
        font-size: 1.8em;
    }
    .settings-form > div {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .settings-form label {
        flex-basis: auto;
        width: 100%;
        text-align: left;
        margin-right: 0;
        margin-bottom: 5px;
    }
    .settings-form input[type="date"],
    .settings-form input[type="number"],
    .settings-form input[type="text"],
    .settings-form textarea {
        min-width: unset;
        max-width: 100%;
        width: 100%;
    }
    .settings-form label[for$="_a"] {
        display: none;
    }
    .settings-form input[name$="_a"] {
        max-width: 100% !important;
        text-align: left;
    }
    .settings-form button {
        padding: 12px 25px;
        font-size: 1em;
    }
    .settings-table th, .settings-table td {
        font-size: 0.8em; /* Ukuran font tabel mobile */
        padding: 8px 10px;
    }
    .action-buttons button {
        padding: 4px 8px;
        font-size: 0.75em;
    }
    .settings-table th:nth-child(1), .settings-table td:nth-child(1) { width: 90px; } /* Tanggal */
    .settings-table th:nth-child(2), .settings-table td:nth-child(2) { width: 70px; }  /* Slot Waktu */
    .settings-table th:nth-child(3), .settings-table td:nth-child(3) { width: 50px; }  /* SET1 */
    .settings-table th:nth-child(4), .settings-table td:nth-child(4) { width: 40px; }  /* S1_A */
    /* ... sesuaikan lebar kolom lainnya jika perlu */
}

@media (max-width: 480px) { /* Settings.php for smaller phones */
    .settings-form h2 {
        font-size: 1.5em;
    }
    .settings-form label {
        font-size: 0.75em;
    }
    .settings-form input[type="date"], .settings-form input[type="number"], .settings-form input[type="text"], .settings-form textarea {
        padding: 6px 8px;
        font-size: 0.85em;
    }
    .settings-form textarea { min-height: 80px; }
    .settings-form button { padding: 8px 15px; font-size: 0.8em; }
    .settings-table th, .settings-table td { font-size: 0.7em; padding: 6px 8px; }
}

@media (max-width: 375px) { /* Settings.php for very small phones */
    .settings-form h2 {
        font-size: 1.3em;
    }
    .settings-form label {
        font-size: 0.7em;
    }
    .settings-form input[type="date"], .settings-form input[type="number"], .settings-form input[type="text"], .settings-form textarea {
        padding: 5px 6px;
        font-size: 0.75em;
    }
    .settings-form textarea { min-height: 60px; }
    .settings-form button { padding: 6px 12px; font-size: 0.7em; }
    .settings-table th, .settings-table td { font-size: 0.6em; padding: 4px 5px; }
}

@media (max-width: 320px) { /* Settings.php for smallest phones */
    .settings-form h2 { font-size: 1.1em; }
    .settings-form label { font-size: 0.65em; }
    .settings-form input[type="date"], .settings-form input[type="number"], .settings-form input[type="text"], .settings-form textarea {
        padding: 4px 5px;
        font-size: 0.7em;
    }
    .settings-form textarea { min-height: 50px; }
    .settings-form button { padding: 5px 10px; font-size: 0.65em; }
    .settings-table th, .settings-table td { font-size: 0.55em; padding: 3px 4px; }
}