*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial;
}



/* BODY LOGIN */

.login-body{

    background:#07339a;

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;
}



/* LOGIN BOX */

.login-container{

    background:rgb(255, 255, 255);

    width:350px;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.3);

    animation:fadeIn 0.8s ease;


}



/* TITLE */

.login-container h1{

    text-align:center;

    margin-bottom:10px;

    color:#2563eb;
}



.login-container p{

    text-align:center;

    margin-bottom:30px;

    color:gray;
}



/* INPUT */

.input-group{

    position:relative;
}



.input-group i{

    position:absolute;

    top:15px;

    left:15px;

    color:gray;
}



.input-group input{

    width:100%;

    padding:15px 15px 15px 45px;

    border:1px solid #ccc;

    border-radius:10px;

    outline:none;
}



/* BUTTON */

button{

    width:100%;

    padding:15px;

    background:#2563eb;

    color:white;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    transition:0.3s;
}



/* HOVER */

button:hover{

    background:#1d4ed8;

    transform:scale(1.03);
}



/* ANIMATION */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* =========================
   DASHBOARD
========================= */

body{

    background:#f1f5f9;
}



/* WRAPPER */

.wrapper{

    display:flex;
}



/* SIDEBAR */

.sidebar{

    width:250px;

    height:100vh;

    background:#0f172a;

    padding:30px;

    position:fixed;
}



.sidebar h2{

    color:white;

    margin-bottom:40px;

    text-align:center;
}



.sidebar a{

    display:block;

    color:white;

    text-decoration:none;

    padding:15px;

    margin-bottom:10px;

    border-radius:10px;

    transition:0.3s;
}



.sidebar a:hover{

    background:#1e293b;

    padding-left:20px;
}



/* CONTENT */

.content{

    margin-left:250px;

    padding:30px;

    width:100%;
}



/* TOPBAR */

.topbar{

    background:white;

    padding:20px;

    border-radius:15px;

    margin-bottom:30px;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}



/* TABLE CONTAINER */

.table-container{

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}



/* INPUT */

input{

    width:100%;

    padding:15px;

    border:1px solid #ccc;

    border-radius:10px;
}



/* TABLE */

table{

    width:100%;

    border-collapse:collapse;
}



table th{

    background:#2563eb;

    color:white;

    padding:15px;
}



table td{

    padding:15px;

    border-bottom:1px solid #ddd;
}



/* STATUS */

.pending{

    color:orange;

    font-weight:bold;
}



.diterima{

    color:green;

    font-weight:bold;
}



.revisi{

    color:red;

    font-weight:bold;
}

/* TEXTAREA */

textarea{

    width:100%;

    padding:10px;

    border-radius:10px;

    border:1px solid #ccc;
}



/* BUTTON TERIMA */

.btn-acc{

    background:#16a34a;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    width:120px;
}



/* BUTTON REVISI */

.btn-tolak{

    background:#dc2626;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    width:120px;
}



/* HOVER */

.btn-acc:hover{

    background:#15803d;

    transform:scale(1.03);
}



.btn-tolak:hover{

    background:#b91c1c;

    transform:scale(1.03);
}



/* KETERANGAN */

.keterangan-box{

    background:#ede9fe;

    color:#5b21b6;

    padding:10px;

    border-radius:10px;
}



/* PENDING */

.pending-box{

    background:#fef3c7;

    color:#92400e;

    padding:10px;

    border-radius:10px;
}

/* =========================
   ANIMASI MODERN
========================= */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}



/* CARD */

.cards{

    display:flex;

    gap:20px;

    margin-bottom:30px;

    flex-wrap:wrap;
}



.card{

    flex:1;

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);

    animation:fadeIn 0.8s ease;

    transition:0.3s;
}



.card:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}



.card h3{

    margin-bottom:10px;

    color:#334155;
}



.card p{

    font-size:28px;

    font-weight:bold;

    color:#2563eb;
}



/* TABLE HOVER */

table tr{

    transition:0.3s;
}



table tr:hover{

    background:#f8fafc;
}



/* SIDEBAR HOVER */

.sidebar a{

    transition:0.3s;
}



.sidebar a:hover{

    background:#1e293b;

    padding-left:22px;
}



/* BUTTON ANIMATION */

button{

    transition:0.3s;
}



button:hover{

    transform:scale(1.03);
}



/* INPUT */

input,
textarea{

    transition:0.3s;
}



input:focus,
textarea:focus{

    border:1px solid #2563eb;

    box-shadow:0 0 10px rgba(37,99,235,0.2);

    outline:none;
}



/* SEARCH BOX */

.search-box{

    margin-bottom:20px;
}



.search-box input{

    background:white;
}



/* RESPONSIVE */

@media(max-width:768px){

    .sidebar{

        width:100%;

        height:auto;

        position:relative;
    }

    .content{

        margin-left:0;
    }

    .cards{

        flex-direction:column;
    }

    table{

        font-size:12px;
    }
}

/* HEADER */

.header-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;
}



/* LOGO */

.logo{

    width:70px;

    height:70px;

    object-fit:contain;
}



/* DARK MODE */

.dark-mode{

    background:#0f172a;

    color:white;
}



/* PREVIEW FILE */

.preview-frame{

    width:100%;

    height:500px;

    border:none;

    border-radius:15px;
}



/* DOWNLOAD LINK */

.download-link{

    background:#2563eb;

    color:white;

    padding:8px 15px;

    border-radius:10px;

    text-decoration:none;
}

/* TOPBAR */

.topbar{

    background:white;

    padding:20px;

    border-radius:20px;

    margin-bottom:25px;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}



/* HEADER FLEX */

.header-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;
}



/* LOGO */

.logo{

    width:70px;

    height:70px;

    object-fit:contain;
}

/* PROFILE */

.profile-box{

    text-align:center;

    margin-bottom:30px;
}



.profile-box img{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid white;

    margin-bottom:10px;
}



.profile-box h3{

    color:white;

    font-size:18px;
}



.profile-box p{

    color:#cbd5e1;

    font-size:14px;
}



/* NOTIFICATION */

.notification{

    background:red;

    color:white;

    padding:5px 10px;

    border-radius:50px;

    font-size:12px;
}



/* LOADER */

.loader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;
}



.spinner{

    width:60px;

    height:60px;

    border:6px solid #ddd;

    border-top:6px solid #2563eb;

    border-radius:50%;

    animation:spin 1s linear infinite;
}



@keyframes spin{

    100%{

        transform:rotate(360deg);
    }
}

/* CHART */

canvas{

    max-height:300px;
}

/* WATERMARK */

body::after{

    content:'BPKAD MINAHASA';

    position:fixed;

    bottom:20px;

    right:20px;

    font-size:40px;

    color:rgba(0,0,0,0.05);

    pointer-events:none;

    font-weight:bold;

    z-index:-1;
}

/* MOBILE */

@media(max-width:600px){

    .table-container{

        overflow-x:auto;
    }

    table{

        min-width:700px;
    }

    .topbar h1{

        font-size:20px;
    }

    .sidebar{

        padding:15px;
    }

    .logo{

        width:50px;
    }
}

/* LOGO */

.logo{

    width:130px;

    height:130px;

    object-fit:contain;

    background:white;

    padding:10px;
}

/* BUTTON EDIT */

.btn-edit{

    background:#f59e0b;

    color:white;

    border:none;

    padding:10px 15px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;
}



.btn-edit:hover{

    opacity:0.9;
}