/*==================================================
        FORM TAMBAH & EDIT SISWA
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#eef3fb;
    overflow-x:hidden;
}

/*==================================
            NAVBAR
==================================*/

.navbar{
    background:linear-gradient(90deg,#2563eb,#1d4ed8);
    box-shadow:0 5px 18px rgba(0,0,0,.12);
}

.navbar-brand{
    font-size:21px;
    font-weight:600;
}

.user-info{
    color:#fff;
    font-weight:500;
}

/*==================================
            SIDEBAR
==================================*/

.sidebar{
    background:#16213e;
    color:#fff;
    min-height:100vh;
    padding:25px 15px;
}

.logo{
    width:90px;
    transition:.3s;
}

.logo:hover{
    transform:scale(1.05);
}

.sidebar h5{
    font-size:18px;
    font-weight:600;
}

.sidebar small{
    color:#cfd8dc;
}

.sidebar hr{
    border-color:#4b6584;
}

/*==================================
            MENU
==================================*/

.sidebar .nav-link{
    color:#e2e8f0;
    display:flex;
    align-items:center;
    padding:12px 15px;
    margin-bottom:5px;
    border-radius:12px;
    transition:.3s;
}

.sidebar .nav-link:hover{
    background:#2563eb;
    color:white;
    transform:translateX(5px);
}

.sidebar .nav-link.active{
    background:#2563eb;
    color:#fff;
    font-weight:600;
}

.menu-btn{
    width:100%;
    background:none;
    border:none;
    color:#e2e8f0;
    text-align:left;
    padding:12px 15px;
    border-radius:12px;
    transition:.3s;
}

.menu-btn:hover{
    background:#2563eb;
}

/*==================================
            CONTENT
==================================*/

.content{
    padding:30px;
}

/*==================================
        PAGE HEADER
==================================*/

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.page-title{
    font-size:30px;
    font-weight:700;
    color:#1f2937;
}

.page-subtitle{
    color:#6b7280;
}

/*====================================================
=            BREADCRUMB
====================================================*/

.breadcrumb{
    background:transparent;
    font-size:17px ;
}

.breadcrumb-item a{
    text-decoration:none;
    color:#2563eb;
    font-weight:500;
}

.breadcrumb-item.active{
    color:#6b7280;
}

/*==================================
        CARD FORM
==================================*/

.form-card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.form-card .card-header{
    background:linear-gradient(90deg,#2563eb,#3b82f6);
    color:white;
    padding:18px 25px;
    font-size:18px;
    font-weight:600;
}

.form-card .card-body{
    padding:35px;
    background:white;
}

/*==================================
        FOTO SISWA
==================================*/

.photo-card{
    background:#f8fbff;
    border:2px dashed #c7d8ff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    height: 460px;
}

.photo-wrapper{
    height:150px;
    width:150%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

.foto-upload{
    display:flex;
    align-items:center;
    gap:20px;
}

.student-photo{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:12px;
    border:3px solid #e9ecef;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    flex-shrink:0;
}

.upload-area{
    flex:1;
}

.upload-area .form-control{
    margin-bottom:8px;
}
.student-photo:hover{
    transform:scale(1.05);
}

/*==================================
        INPUT
==================================*/

.form-label{
    font-weight:600px;
    color:#374151;
}

.form-control,
.form-select{
    border-radius:12px;
    border:1px solid #d6dbe7;
    padding:11px 14px;
    transition:.3s;
}

.form-control:focus,
.form-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
}

/*==================================
        TEXTAREA
==================================*/

textarea.form-control{
    resize:none;
}

/*==================================
        BUTTON
==================================*/

.btn{
    border-radius:12px;
    padding:10px 22px;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-success{
    background:#22c55e;
    border:none;
}

.btn-success:hover{
    background:#16a34a;
}

.btn-warning{
    color:white;
}

.btn-warning:hover{
    color:white;
}

.btn-secondary{
    border:none;
}

/*==================================
        ALERT
==================================*/

.alert{
    border:none;
    border-radius:12px;
}

/*==================================
        FILE INPUT
==================================*/

input[type=file]{
    margin-top:15px;
}

/*==================================
        READONLY INPUT
==================================*/

.form-control[readonly]{
    background:#f8f9fa;
    color:#495057;
    font-weight:600;
    cursor:not-allowed;
}


/*==================================
        PREVIEW FOTO
==================================*/
.preview{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:15px;
    border:3px solid #dee2e6;
    box-shadow:0 6px 15px rgba(0,0,0,.12);
    transition:.3s;
}

.preview:hover{
    transform:scale(1.03);
}

/*==================================
        FILE SELECTOR
==================================*/
input[type=file]::file-selector-button{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:9px 18px;
    border-radius:10px;
    margin-right:12px;
    cursor:pointer;
    transition:.3s;
}

input[type=file]::file-selector-button:hover{
    background:#1d4ed8;
}

/*==================================
        BUTTON GROUP
==================================*/

.btn-success,
.btn-warning,
.btn-secondary{
    min-width:130px;
    font-weight:600;
}

.btn-success i,
.btn-warning i,
.btn-secondary i{
    margin-right:6px;
}

/*==================================
        FORM SECTION
==================================*/
.section-title{
    font-size:18px;
    font-weight:700;
    color:#2563eb;
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:2px solid #e9ecef;
}

/*==================================
        CARD HOVER
==================================*/
.form-card{
    transition:.3s;
}

.form-card:hover{
    box-shadow:0 15px 30px rgba(0,0,0,.12);
}

/*==================================
        INPUT GROUP
==================================*/

.input-group-text{
    background:#2563eb;
    color:#fff;
    border:none;
}

/*==================================
        REQUIRED
==================================*/

.required{
    color:#ef4444;
    font-weight:700;
}
/*==================================
        RESPONSIVE
==================================*/

@media(max-width:992px){
    .page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .page-header .btn{
        width:100%;
    }

    .content{
        padding:20px;
    }

    .photo-card{
        margin-bottom:25px;
    }
}

@media(max-width:768px){

    .page-title{
        font-size:24px;
    }

    .form-card .card-body{
        padding:20px;
    }

    .student-photo{
        width:150px;
        height:150px;
    }
}