@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
    --primary:#2b4ea2;
    --primary-dark:#162f73;
    --sidebar:#0f1f52;
    --background:#f4f7fc;
    --card:#ffffff;
}

*{
    font-family:'Poppins',sans-serif;
}

body{
    background:var(--background);
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/* Navbar */

.topbar{
    height:70px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    position:fixed;
    left:260px;
    right:0;
    top:0;
    z-index:1000;
}

.topbar-title{
    font-size:24px;
    font-weight:600;
    color:var(--primary);
}

/* Sidebar */

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:linear-gradient(
        180deg,
        #132b6b,
        #0f1f52
    );
    z-index:1100;
}

.logo-area{
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:22px;
    font-weight:700;
}

.menu-title{
    color:#8fa3d8;
    font-size:12px;
    margin:20px;
    text-transform:uppercase;
}

.menu-link{
    display:block;
    margin:8px 15px;
    padding:12px 15px;
    color:#d7dff9;
    text-decoration:none;
    border-radius:12px;
    transition:.3s;
}

.menu-link i{
    margin-left:8px;
    font-size:14px;
    float:none;
}
.sub-menu{
    margin-left:35px !important;
    margin-right:15px !important;
    font-size:13px;
}
.menu-link:hover{
    background:#2b4ea2;
    color:white;
}

.menu-active{
    background:#2b4ea2;
    color:white;
}

/* Content */

.main-content{
    margin-left:260px;
    margin-top:70px;
    padding:20px;
}

/* Card */

.card-custom{
    background:white;
    border:none;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

/* Footer */

.footer-fixed{
    position:fixed;
    left:260px;
    right:0;
    bottom:0;

    height:45px;

    background:white;
    border-top:1px solid #ddd;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:13px;
}

body{
    padding-bottom:60px;
}

.logo-icon{
    font-size:28px;
    margin-right:10px;
}

.menu-link{
    font-size:14px;
    font-weight:500;
}
/* LOGO-SIDEBAR */
.logo-area{
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:white;
    font-size:22px;
    font-weight:600;

    border-bottom:1px solid rgba(255,255,255,.1);
}

.logo-area i{
    font-size:28px;
}


.logo-sidebar{
    width:40px;
    height:40px;
    object-fit:contain;
    margin-right:10px;
}

.logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.logo-text small{
    font-size:11px;
    color:#b8c4f0;
}

.tagline{
    font-family:'Great Vibes', cursive;
    font-size:20px;
    color:#d6e4ff;
    margin-top:-2px;
    letter-spacing:1px;
}

.readonly-field {
    background-color: #f1f3f5 !important;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.dropdown-arrow{
    transition: transform .3s ease;
	color:red !important;
    font-size:20px !important;
}

/* saat menu terbuka */
.menu-link[aria-expanded="true"] .dropdown-arrow{
    transform: rotate(180deg);
}

/* Navigasi dan tata letak untuk layar ponsel */
.mobile-menu-toggle{
    display:none;
    color:var(--primary);
    font-size:28px;
    line-height:1;
}

.sidebar-backdrop{ display:none; }
.mobile-table-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 767.98px){
    body.menu-open{ overflow:hidden; }
    .sidebar{ width:min(82vw, 300px); transform:translateX(-105%); transition:transform .25s ease; box-shadow:none; }
    .sidebar.sidebar-open{ transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,.25); }
    .sidebar-backdrop{ position:fixed; inset:0; z-index:1050; background:rgba(8,18,48,.48); }
    .sidebar-backdrop.show{ display:block; }
    .topbar{ left:0; height:62px; padding:0 14px; }
    .mobile-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    .topbar-title{ font-size:18px; line-height:1.2; }
    .topbar-user strong{ display:none; }
    .topbar-user i{ font-size:21px; margin:0 !important; }
    .btn-logout i{ font-size:22px !important; }
    .main-content{ margin-left:0; margin-top:62px; padding:12px; }
    .footer-fixed{ position:static; height:auto; min-height:46px; padding:8px 12px; text-align:center; left:auto; font-size:11px; }
    body{ padding-bottom:0; }
    .card-custom{ border-radius:14px; }
    .card-body{ padding:14px; }
    .page-header{ align-items:flex-start !important; gap:12px; flex-wrap:wrap; }
    .page-header .btn, .page-header > button{ width:100%; }
    .table{ min-width:620px; font-size:13px; }
    .table-wrapper .table{ min-width:680px; }
    .modal-dialog{ margin:10px; }
    .dashboard-wrapper{ padding:0 !important; }
    .main-content form.d-flex{ flex-wrap:wrap; }
    .main-content form.d-flex > .form-control,
    .main-content form.d-flex > .form-select,
    .main-content form.d-flex > .input-group{ flex:1 1 100%; width:100%; }
    .main-content form.d-flex > .btn{ flex:1 1 auto; }
    .modal-body .row{ row-gap:.5rem; }
}

/* Halaman login */
.login-page{
    min-height:100dvh;
    padding:24px 12px;
    display:flex;
    align-items:center;
    background:linear-gradient(145deg, #e8efff 0%, #f7f9ff 52%, #dce8ff 100%);
}

.login-container{ width:100%; }
.login-row{ justify-content:center; }

.login-card{
    overflow:hidden;
    border:0;
    border-radius:20px;
    box-shadow:0 14px 35px rgba(22, 47, 115, .16) !important;
}

.login-card-header{
    padding:26px 24px 22px;
    color:#fff;
    border:0;
    background:linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.login-icon{ display:block; font-size:38px; line-height:1; margin-bottom:10px; }
.login-card-header h1{ margin:0; font-size:22px; font-weight:600; }
.login-card-header p{ margin:5px 0 0; font-size:14px; opacity:.85; }

.login-card-body{ padding:26px 24px; }
.login-card-body label{ display:block; margin-bottom:7px; font-size:14px; font-weight:500; color:#263457; }
.login-card-body .form-control,
.login-card-body .input-group .btn{
    min-height:46px;
    font-size:16px;
}
.login-card-body .form-control{ border-radius:10px; }
.login-card-body .input-group .form-control{ border-radius:10px 0 0 10px; }
.login-card-body .input-group .btn{ border-radius:0 10px 10px 0; padding-inline:15px; }
.login-submit{ min-height:48px; border-radius:10px; font-size:16px; font-weight:600; }

@media (max-width: 575.98px){
    .login-page{ padding:16px 10px; align-items:center; }
    .login-container{ padding-inline:0; }
    .login-card{ border-radius:16px; }
    .login-card-header{ padding:24px 18px 20px; }
    .login-card-header h1{ font-size:21px; }
    .login-card-body{ padding:22px 18px; }
    .login-card-body .mb-3{ margin-bottom:18px !important; }
    .login-card-body .form-control,
    .login-card-body .input-group .btn,
    .login-submit{ min-height:52px; font-size:16px; }
}