/* assets/css/style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    display: flex;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.main-content {
    flex-grow: 1;
    padding: 20px;
}

header {
    background-color: #007bff; /* Biru */
    color: white;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 3px solid #0056b3;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

nav.sidebar {
    min-width: 220px;
    max-width: 220px;
    background-color: #343a40; /* Abu gelap */
    color: white;
    padding-top: 20px;
}

nav.sidebar .user-panel {
    padding: 10px 15px;
    border-bottom: 1px solid #4f5962;
    margin-bottom: 10px;
}
nav.sidebar .user-panel p {
    margin: 0;
    font-size: 0.9em;
}

nav.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav.sidebar ul li a {
    display: block;
    padding: 12px 20px;
    color: #c2c7d0;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    border-left: 3px solid transparent;
}

nav.sidebar ul li a:hover,
nav.sidebar ul li a.active {
    background-color: #495057;
    color: #fff;
    border-left-color: #007bff;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}
table tr:hover {
    background-color: #f1f1f1;
}

.btn {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9em;
}

.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; }
.btn-success { background-color: #28a745; color: white; }
.btn-success:hover { background-color: #1e7e34; }
.btn-warning { background-color: #ffc107; color: #212529; }
.btn-warning:hover { background-color: #e0a800; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #c82333; }
.btn-info { background-color: #17a2b8; color: white; }
.btn-info:hover { background-color: #117a8b; }


form {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
form input[type="date"],
form select,
form textarea {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
form textarea {
    min-height: 80px;
    resize: vertical;
}

form input[type="submit"],
form button[type="submit"] { /* Style submit buttons */
    /* Menggunakan style dari .btn */
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* Login Page specific */
.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff; /* Background biru seperti header */
}
.login-box {
    width: 360px;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.login-box h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Responsive sidebar (simple toggle) */
.page-wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}
.sidebar-toggle {
    display: none; /* Hidden on larger screens */
    background: #343a40;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.2em;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .page-wrapper {
        flex-direction: column;
    }
    nav.sidebar {
        max-width: none; /* Full width */
        width: 100%;
        position: fixed; /* or absolute */
        top: 0;
        left: -100%; /* Initially hidden */
        height: 100vh;
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto; /* if content overflows */
    }
    nav.sidebar.active {
        left: 0; /* Show sidebar */
    }
    .main-content {
        margin-left: 0;
        padding-top: 60px; /* space for fixed toggle button */
    }
    .sidebar-toggle {
        display: block;
    }
    header { /* Main header will be inside main-content */
        width: 100%;
        box-sizing: border-box;
    }
    /* assets/css/style.css */

/* ... (CSS Anda yang sudah ada) ... */

/* Print-specific styles */
@media print {
    body {
        font-family: 'Times New Roman', Times, serif; /* Font serif lebih umum untuk cetak formal */
        font-size: 10pt;
        background-color: #fff !important; /* Paksa background putih */
        margin: 20mm 15mm 20mm 15mm; /* Margin: Atas Kanan Bawah Kiri */
        color: #000 !important; /* Paksa warna teks hitam */
    }

    /* Sembunyikan elemen yang tidak perlu dicetak */
    nav.sidebar,
    .main-content > header,
    .sidebar-toggle,
    form.filter-form, /* Form filter periode */
    div.action-buttons, /* Div yang berisi tombol cetak/pdf */
    .no-print, /* Elemen dengan class .no-print */
    .btn /* Umumnya tombol tidak dicetak, kecuali Anda mau styling khusus */
    {
        display: none !important;
    }

    /* Tampilkan header khusus cetak */
    .print-header {
        display: block !important; /* Tampilkan div .print-header */
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #000;
        padding-bottom: 10px;
    }
    .print-header h2, .print-header h3, .print-header h4 {
        margin: 5px 0;
    }


    .page-wrapper,
    .main-content,
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        display: block !important;
        background-color: transparent !important;
    }
    
    .main-content {
         padding-top: 0 !important;
    }

    #laporan-rekapan-konten > h2, 
    #laporan-rekapan-konten > p { /* Judul halaman & info periode jika tidak pakai print-header */
        /* Bisa disembunyikan jika sudah ada di .print-header */
        /* display: none !important; */
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 0px !important; /* Margin atas tabel, bisa 0 jika print-header sudah ada jarak */
        font-size: 9pt; /* Mungkin perkecil font tabel agar muat */
    }

    table th, table td {
        border: 1px solid #333 !important; /* Border abu gelap untuk tabel cetak */
        padding: 4px 6px !important; /* Perkecil padding */
        text-align: left !important;
        vertical-align: top;
    }

    table th {
        background-color: #e9e9e9 !important;
        color: #000 !important;
        font-weight: bold !important;
    }
    
    table tr:nth-child(even) {
        background-color: transparent !important;
    }

    /* Style untuk status pelanggaran agar tetap terlihat di print */
    td[style*="background-color: #ffcccc"] { background-color: #ffcccc !important; color: #a00 !important; }
    td[style*="background-color: #fff3cd"] { background-color: #fff3cd !important; color: #856404 !important; }
    td[style*="background-color: #d4edda"] { background-color: #d4edda !important; color: #155724 !important; }


    h1, h2, h3, h4, p {
        color: #000 !important;
        page-break-after: avoid;
    }

    table tr {
        page-break-inside: avoid !important;
    }
    table thead {
        display: table-header-group; /* Penting agar header tabel terulang di setiap halaman jika tabel panjang */
    }
    a {
        text-decoration: none !important;
        color: #000 !important;
    }
    a[href]::after { /* Jangan tampilkan URL setelah link saat print */
        content: "";
    }

}