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

.sidebar{

    background:linear-gradient(180deg,#003366,#004a99);

    min-height:100vh;

    width:270px;

    min-width:270px;

    flex-shrink:0;

    padding-top:20px;

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

}

.sidebar img{

    border-radius:50%;

    background:#fff;

    padding:6px;

}

.sidebar h5{

    color:#ffffff;

    font-weight:700;

    margin-top:10px;

}

.sidebar small{

    color:#dcdcdc;

}

.sidebar hr{

    border-color:rgba(255,255,255,.2);

    margin:15px 0;

}

.sidebar a{

    display:block;

    padding:14px 22px;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:all .3s ease;

    border-left:4px solid transparent;

}

.sidebar a i{

    width:25px;

    font-size:18px;

    margin-right:10px;

}

.sidebar a:hover{

    background:#00509e;

    color:#ffffff;

    border-left:4px solid #f4b400;

    padding-left:30px;

}

.sidebar a.active{

    background:#00509e;

    border-left:4px solid #f4b400;

    color:#ffffff;

    font-weight:600;

}

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

.content{

    padding:25px;

}

.container-fluid{

    padding-left:20px;

    padding-right:20px;

}

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

.form-control{

    border-radius:12px;

    border:1px solid #d6d6d6;

    padding:10px 15px;

    transition:.3s;

}

.form-control:focus{

    border-color:#00509e;

    box-shadow:0 0 0 .2rem rgba(0,80,158,.15);

}

.form-select{

    border-radius:12px;

}

textarea{

    resize:none;

}

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

.btn{

    border-radius:12px;

    padding:10px 18px;

    font-weight:600;

}

.btn-success{

    background:#198754;

    border:none;

}

.btn-success:hover{

    background:#157347;

}

.btn-danger{

    border:none;

}

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

.alert{

    border-radius:12px;

    border:none;

}

/* ======================================================
                CARD HEADER
====================================================== */

.card-header{

    font-weight:600;

    font-size:17px;

}

/* ======================================================
                SCROLLBAR
====================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:#00509e;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003366;

}

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

@media (max-width:992px){

.sidebar{

    min-height:auto;

}

.content{

    padding:15px;

}

}

/* ======================================================
   FOTO PROFIL - PASTIKAN SELALU LINGKARAN SEMPURNA
   (berlaku untuk admin, dosen, dan mahasiswa)
====================================================== */
.foto-profil{

    border-radius:12px !important;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    margin-left:auto;

    margin-right:auto;

    flex-shrink:0;

}

/* ======================================================
   LOGO NAVBAR - BADGE BULAT RAPI
====================================================== */
.logo-badge{

    width:60px !important;

    height:60px !important;

    min-width:60px !important;

    max-width:60px !important;

    border-radius:12px !important;

    display:flex !important;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    flex-shrink:0;

    padding:4px;

    transition:transform .25s ease, box-shadow .25s ease;

}

.logo-badge:hover{

    transform:scale(1.08);

    box-shadow:0 0 12px rgba(255,255,255,.6);

}

.logo-badge img{

    width:100%;

    height:100%;

    object-fit:contain;

}


/* ======================================================
   SIDEBAR MOBILE (menu geser / off-canvas)
====================================================== */

@media (max-width:991.98px){

    .wrapper{
        display:block;
    }

    .main-content{
        width:100%;
    }

    .sidebar{
        position:fixed;
        top:0;
        left:0;
        height:100vh;
        z-index:1050;
        overflow-y:auto;
        transform:translateX(-100%);
        transition:transform .3s ease;
        box-shadow:4px 0 15px rgba(0,0,0,.3);
    }

    .sidebar.show{
        transform:translateX(0);
    }

    .sidebar-overlay{
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
        z-index:1040;
    }

    .sidebar-overlay.show{
        display:block;
    }

}

@media (min-width:992px){

    #sidebarToggleBtn{
        display:none !important;
    }

}


/* ======================================================
   NAVBAR 1 BARIS DI HP (logo + judul + ikon sejajar)
====================================================== */

@media (max-width:767.98px){

    .navbar .container-fluid{
        padding-left:10px !important;
        padding-right:10px !important;
        flex-wrap:nowrap;
    }

    #sidebarToggleBtn{
        padding:4px 6px;
        flex-shrink:0;
    }

    #sidebarToggleBtn i{
        font-size:1rem !important;
    }

    .navbar-brand{
        gap:6px;
        min-width:0;
        overflow:hidden;
        flex:1 1 auto;
        margin-right:6px !important;
    }

    .navbar-brand .lh-sm{
        min-width:0;
        overflow:hidden;
    }

    .logo-badge{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        max-width:32px !important;
        padding:2px;
        margin-right:6px !important;
    }

    .navbar-brand .fs-3{
        font-size:.92rem !important;
        line-height:1.15;
        white-space:nowrap;
    }

    .navbar-brand .text-warning{
        font-size:.62rem !important;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .navbar-brand small{
        display:block !important;
        color:#fff !important;
        font-size:.58rem !important;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* ---- Ikon kanan: notifikasi + profil sejajar ---- */

    .navbar > .container-fluid > .ms-auto{
        flex-shrink:0;
        gap:8px;
    }

    .navbar .dropdown.me-4{
        margin-right:0 !important;
    }

    .navbar .btn-link.rounded-circle{
        width:28px !important;
        height:28px !important;
    }

    .navbar .btn-link.rounded-circle .bi-bell-fill{
        font-size:.85rem !important;
        color:#fff;
    }

    .navbar .btn-link.rounded-circle .badge{
        font-size:.55rem !important;
        padding:.25em .4em;
    }

    .navbar > .container-fluid .ms-auto img.foto-profil{
        width:28px !important;
        height:28px !important;
    }

    .navbar > .container-fluid .ms-auto .ms-3.text-start{
        display:none;
    }

    .navbar .dropdown-toggle::after{
        display:none;
    }

    /* ---- KONTEN HALAMAN: judul lebih kecil ---- */

    .main-content{
        padding:12px !important;
    }

    .dashboard-title{
        font-size:.9rem;
    }

    .dashboard-subtitle{
        font-size:.68rem;
    }

    .card-header h4,
    .card-header h5{
        font-size:.85rem !important;
    }

    .card-body h2,
    .card-body h3{
        font-size:1.05rem;
    }

    .table th,
    .table td{
        font-size:.72rem;
    }

    h2{ font-size:1.1rem; }
    h3{ font-size:1rem; }
    h4{ font-size:.9rem; }
    h5{ font-size:.8rem; }

    .btn{
        font-size:.8rem;
    }

    label,
    .form-label{
        font-size:.8rem;
    }

}

@media (max-width:360px){

    .navbar-brand .fs-3{
        font-size:.72rem !important;
    }

    .navbar-brand .text-warning,
    .navbar-brand small{
        font-size:.48rem !important;
    }

    .logo-badge{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        max-width:28px !important;
    }

}