/*
 Theme Name:   Twenty Twenty-Four Child
 Template:     twentytwentyfour
 Description:  Tema anak untuk Twenty Twenty-Four
 Author:       Muhammad Rizki
 Version:      1.0.0
*/
<style>
    .wp-block-group {
        margin-top: 0;
        font-family: var(--wp--preset--font-family--body); /* Samakan font */
        color: var(--wp--preset--color--contrast); /* Samakan warna teks */
    }
    .wrapper-laporan{
        display: flex;
        flex-direction: column;
        max-width: 1200px;
        margin: 0 auto;
        padding: 80px 20px;
        justify-content:center;
        align-items:stretch;
    }
    .side{
        flex: 0 0 20%;
        display: flex;
        background: rgba(255,255,255,0.1); 
        padding: 10px; 
        border-radius: 15px; 
        border: 1px solid rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }
    .side h3{
        text-align: center;
        margin: 3px auto;
    }
    .side div{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 100%;
        padding: 10px; 
        border-radius: 15px;
        background: rgba(255,255,255,0.2); 
        margin: 5px 0px;

    }
    .side div input[type="submit"]{
        text-align: right;
    }
    .side input[type="number"]{
        max-width: 30px;
    }
    .form_filter{
        float: none;
    }
    .area_staf{
        flex: 0 0 80%;
        display: flex;
        flex-direction: column;
        background: rgba(255,255,255,0.1); 
        padding: 10px;
        border-radius: 15px; 
        border: 1px solid rgba(0,0,0,0.1);
    }
    .area_staf h3{
        text-align: center;
    }
    .area_staf div p{
        margin: 0px;
    }
    .isi_staf{
        margin: 10px;
        flex: 70%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        background: rgba(255,255,255,0.2); 
        padding: 10px; 
        border-radius: 15px;
    }
    .foto img{
        width: 100px;
        height: 100px;
    }
    #edit_img{
        height: 200px;
        width: 150px;
    }
    .stat{
        display: flex;
        flex-direction: row;
    }
    .pegid{
        font-size: 11px;
        color: rgba(0, 0, 0, 0.7);
    }
    .modal-bg {
        display: none; 
        position: fixed;
        z-index: 9999;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: rgba(255,255,255,0.4);
        justify-content: center;
        align-items: center;
    }
    .modal-kotak{
        display: flex;
        background-color: rgba(255,255,255,0.9);
        border-radius: 15px;
        padding: 20px;
        margin: 0 50px;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    .grup-form{
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .input_bk{
        display: flex;
        align-items: center;
    }
    .input_bk input{
        max-width: 100px;
    }
    .area_pencarian{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background: rgba(255,255,255,0.1); 
        padding: 15px; 
        border-radius: 15px; 
        border: 1px solid rgba(0,0,0,0.1);
        margin: 0 auto;
    }
    .kotak-pencarian{
        display: flex;
        flex-direction: column;
        border: 1px solid white;
        border-radius: 15px;
        padding: 15px;
        margin: 0.5px;
    }
    .kotak-pencarian div h3{
        margin-top: 0px;
        margin-bottom: 5px;
        text-align: center;
    }
    .form-bukukas{
        display: flex;
        flex-direction:row;
    }
    .table-responsive{
        margin-top: 10px;
        overflow-x: auto;
        /*width: 100%;*/
    }
    .table-responsive h3{
        text-align: center;
    }
    .table-responsive::-webkit-scrollbar {
        height: 8px; /* Mengatur tinggi bar scroll horizontal */
    }
    .table-responsive::-webkit-scrollbar-thumb {
        background: #6d8061; /* Warna hijau agar senada dengan navbar */
        border-radius: 10px;
    }
    tbody tr:nth-child(even) {
        background-color: rgba(109, 128, 97, 0.05); /* Hijau sangat muda dari warna navbar kamu */
    }
    tbody tr:hover {
        background-color: rgba(109, 128, 97, 0.1); /* Efek sorot saat kursor lewat */
    }
    table {
        width: 100%;
        min-width: 1000px;
        border-collapse: collapse;
        background-color: transparent;
        margin-top: 0px;
    }
    thead{
        background-color: #6d8061; 
        color: white;
    }
    th {
        background-color: rgba(0,0,0,0.05);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.8em;
        padding: 15px; 
        border: 1px solid #ddd;
    }
    td{
        text-align: center;
    }

    /* Membuat input terlihat lebih modern dan serasi */
    input[type="text"],input[type="number"], input[type="month"],input[type="date"], input[type="submit"], select,button {
        padding: 8px 15px;
        margin: 5px;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.2);
        background: white;
    }

    input[type="submit"], button {
        background: #2c3e50; /* Sesuaikan dengan warna navbar kamu */
        color: white;
        cursor: pointer;
        transition: 0.3s;
    }
    
    input[type="submit"]:hover , button:hover{
        opacity: 0.8;
    }
    ul.navbar{
        width: 100%;
        background-color: #6d8061;
        list-style-type: none;
        padding: 1px 0px;
        margin: 0;
        position: fixed;
        top: 0;
        z-index: 9999999;
    }
    ul.navbar li.nav_kanan{
        float: right;
    }
    ul.navbar li{
        float: left;
    }
    ul.navbar li a{
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        color: white;
        font-size: 20px;
    }
    p.profil_cus{
        display: inline-block;
        text-decoration: none;
        color: rgb(230, 230, 230);
        font-size: 15px;
    }

    ul.navbar li a:hover{
        background-color: #000000;
        border-radius: 8px;
    }
    ul.navbar li.dropdown2:hover div.isi-drop2{
        display: block;
        background-color: #6d8061;
    }
    ul.navbar li.dropdown2 div.isi-drop2{
        display: none;
        position: absolute;
        border-radius: 8px;
    }
    div.isi-drop{
        display: none;
    }
    div.navbar a.drop1:hover ~ div.isi-drop2{
        display:flex;
        flex-direction: column;
    }
    div.navbar a:hover{
        background-color: #000000;
    }
    
    ul.navbar2{display: none;}
    @media screen and (max-width: 600px){
        ul.navbar{
            display: none;
        }
        ul.navbar2 div.isi-drop3 , ul.navbar2 div.isi-drop4{
            display:none;
            position: absolute; 
            background-color: #6d8061;
            bottom: 100%;
        }

        ul.navbar2{
            display: block; 
            position:fixed;  
            bottom:0; 
            margin-bottom: 1px;
            width: 100%; 
            background-color:#6d8061; 
            list-style-type: none; 
            padding: 5px 0px;
        }

        ul.navbar2 li{float: left;}
        ul.navbar2 li.profil_cus2{float: right;}

        ul.navbar2 li a{
            text-decoration: none;
            color: white;
            font-size: 18px;
            padding: 10px 14px;
        }
        ul.navbar2 li p{
            text-decoration: none;
            color: white;
            font-size: 18px;
            padding: 10px 14px;
        }

        ul.navbar2 li a:hover{
            background-color: #000000;
        }

        ul.navbar2 li.dropdown3:hover div.isi-drop3,ul.navbar2 li.dropdown4:hover div.isi-drop4{
            display: flex;
            flex-direction: column;
            backgorund-color: #6d8061;
            border-radius: 8px;
        }
    }
    @media screen and (max-width: 600px) {
        .wrapper-laporan{
            flex-direction: column;
        }
        .area_pencarian{
            flex-direction: column;
        }
        .form-bukukas{
            flex-direction: column;
        }
        .side{
            align-items: center;
            justify-content: center;
        }
        .isi_staf{
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .tombol-edit{
            order: 3;
        }
        .foto{
            order: 1;
        }
        .isian{
            order: 2;
        }
        #edit_img{
            height: 100px;
            width: 100px;
        }
        .modal-bg{
            
        }
        .modal-header h3{
            margin: 0 auto;
        }
        .modal-kotak{
            margin: auto;
            width: 100%;
        }
        .grup-form{
            flex-direction: column;
            font-size: small;
        }
        .input-grup,.input_bk{
            font-size: small;
        }
    }
    @media print {
        @page { size: A4; margin: 0.5cm 1.5cm; }
        body * { visibility: hidden; }
        #sk-print-area, #sk-print-area * { visibility: visible; }
        #sk-print-area { 
            display: block !important;
            visibility: visible !important;
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            font-family: "Times New Roman", Times, serif; /* Font resmi SK */
            font-size: 12pt; /* Ukuran standar dokumen resmi */
            color: #000;
            background: white;
        }
        body > *:not(#sk-print-area) {
            display: none !important;
        }
        .sk-header { display: flex; align-items: center; border-bottom: 3px solid #000; padding-bottom: 5px; margin-bottom: 2px; }
        .sk-logo { width: 100px; margin-right: 10px; }
        .yayasan-name { font-size: 16pt; margin: 0; }
        .alamat{ margin: 0; padding: 0; }
        .sk-header-text { text-align: center; flex-grow: 1; }
        
        .sk-title-section { text-align: center; margin-top: 15px; }
        .sk-title-section h3, .sk-title-section h4 { font-size: 14pt; margin: 0; text-decoration: underline; }
        .line-double {
            border-bottom: 3px double #000; /* Perintah 'double' otomatis membuat 2 garis */
            width: 100%;
            margin: 1px 0 1px 0; /* Jarak atas 10px, bawah 20px */
        }
        
        .sk-section { display: flex; margin-top: 10px; }
        .label { width: 100px; font-weight: bold; }
        .points { flex: 1; }
        .points p{
            margin: 0; 
            padding: 0;
        }
        
        .table-data { margin-left:0.5cm; margin-top: 0px; width: 100px; padding: 0; }
        .table-data td { padding: 2px; vertical-align: top; text-align: left; }
        
        .ttd-box { float: right; text-align: center; margin-top: 30px; margin-right: 50px;}
    }

    @media screen { #sk-print-area { display: none; } }
</style>