/* =========================================================
   SISTEM KOKURIKULUM - STANDARD GLOBAL CSS
   Full Width + Page Border + Blue Gradient
   ========================================================= */

:root{
    --primary:#0d6efd;
    --primary-dark:#084298;
    --primary-deep:#052c65;
    --primary-soft:#eaf3ff;

    --blue-1:#eef6ff;
    --blue-2:#dbeafe;
    --blue-3:#bfdbfe;

    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --text:#172033;
    --muted:#64748b;

    --border:#b9cee8;
    --border-dark:#82a8d6;

    --white:#ffffff;
    --light:#f8fbff;

    --shadow:0 8px 24px rgba(13, 71, 161, .10);
    --shadow-soft:0 3px 12px rgba(13, 71, 161, .08);

    --radius:12px;
    --radius-sm:8px;
}

/* =========================================================
   RESET
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    margin:0;
    min-height:100vh;
    font-family:"Segoe UI", Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        linear-gradient(135deg, #dbeafe 0%, #eff6ff 42%, #d7e8ff 100%);
    background-attachment:fixed;
    font-size:14px;
}

/* =========================================================
   PAGE / CONTAINER
   ========================================================= */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid{
    width:100% !important;
    max-width:none !important;
}

.container-fluid{
    padding:14px !important;
}

.page-wrap,
.page-wrapper,
.main-wrapper,
.content-wrapper{
    width:100%;
    max-width:none !important;
    margin:0 !important;
    padding:18px;
    background:rgba(255,255,255,.97);
    border:1px solid var(--border-dark);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    min-height:calc(100vh - 28px);
}

/* Jika page tidak menggunakan .page-wrap */
body > .container-fluid > .row,
body > .container > .row{
    width:100%;
}

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

.page-header{
    background:linear-gradient(135deg, var(--primary-deep), var(--primary));
    color:#fff;
    border:1px solid #0b58ca;
    border-radius:var(--radius);
    padding:18px 20px;
    margin-bottom:16px;
    box-shadow:var(--shadow-soft);
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5{
    color:#fff;
    margin:0;
    font-weight:800;
}

.page-title{
    color:var(--primary-dark) !important;
    font-weight:800;
    letter-spacing:-.2px;
}

.page-subtitle,
.small-muted,
.text-muted{
    color:var(--muted) !important;
}

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

.card{
    border:1px solid var(--border) !important;
    border-radius:var(--radius) !important;
    background:var(--white);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.card-header{
    background:linear-gradient(180deg,#ffffff,#f3f8ff) !important;
    color:var(--primary-dark);
    border-bottom:1px solid var(--border) !important;
    padding:13px 16px;
    font-weight:700;
}

.card-body{
    padding:16px;
}

.stat-card{
    position:relative;
    overflow:hidden;
    border-left:4px solid var(--primary) !important;
}

.stat-card span{
    display:block;
    font-size:11px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.stat-card strong{
    display:block;
    margin-top:5px;
    font-size:26px;
    line-height:1.1;
    color:var(--primary-dark);
}

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

.form-label{
    color:#25324a;
    font-size:13px;
    margin-bottom:6px;
}

.form-control,
.form-select{
    min-height:40px;
    border:1px solid #a9bfdc;
    border-radius:var(--radius-sm);
    color:var(--text);
    background-color:#fff;
}

.form-control:focus,
.form-select:focus{
    border-color:#4f8ee8;
    box-shadow:0 0 0 .2rem rgba(13,110,253,.13);
}

.form-control::placeholder{
    color:#94a3b8;
}

.input-group-text{
    border-color:#a9bfdc;
    background:#edf5ff;
    color:var(--primary-dark);
}

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

.btn{
    border-radius:8px;
    font-weight:600;
    min-height:38px;
}

.btn-primary{
    background:linear-gradient(135deg,#0b5ed7,#0d6efd);
    border-color:#0b5ed7;
}

.btn-primary:hover{
    background:linear-gradient(135deg,#084298,#0b5ed7);
}

.btn-success{
    background:linear-gradient(135deg,#157347,#198754);
    border-color:#157347;
}

.btn-danger{
    background:linear-gradient(135deg,#b02a37,#dc3545);
    border-color:#b02a37;
}

.btn-outline-primary{
    color:var(--primary);
    border-color:#6ea8fe;
}

.btn-outline-primary:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* =========================================================
   TABLE
   ========================================================= */

.table-responsive{
    width:100%;
    border-radius:0 0 var(--radius) var(--radius);
}

.table{
    width:100% !important;
    margin-bottom:0;
    color:var(--text);
}

.table > :not(caption) > * > *{
    border-color:#cbd9ea;
}

.table thead th{
    background:linear-gradient(135deg,#084298,#0d6efd) !important;
    color:#fff !important;
    font-size:12px;
    font-weight:700;
    vertical-align:middle;
    white-space:nowrap;
    padding:11px 10px;
    border-color:#356fb7 !important;
}

.table tbody td{
    vertical-align:middle;
    font-size:12px;
    padding:9px 10px;
}

.table-hover > tbody > tr:hover > *{
    background:#eef6ff;
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
    background:#f8fbff;
}

.group-header td{
    background:linear-gradient(135deg,#0b4da2,#1565c0) !important;
    color:#fff !important;
    font-weight:800;
    border-color:#0b4da2 !important;
}

/* =========================================================
   BADGE
   ========================================================= */

.badge{
    border-radius:999px;
    padding:.45em .70em;
    font-weight:700;
}

.badge-ketua{
    background:#fff0f0;
    color:#b42318;
    border:1px solid #fecaca;
}

.badge-ahli{
    background:#eaf8ef;
    color:#146c43;
    border:1px solid #b9e6ca;
}

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

.alert{
    border-radius:10px;
    border-width:1px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

/* =========================================================
   MODAL
   ========================================================= */

.modal-content{
    border:1px solid var(--border-dark);
    border-radius:14px;
    box-shadow:0 15px 45px rgba(3,35,78,.22);
    overflow:hidden;
}

.modal-header{
    background:linear-gradient(135deg,var(--primary-deep),var(--primary));
    color:#fff;
    border-bottom:0;
}

.modal-header .btn-close{
    filter:brightness(0) invert(1);
}

.modal-title{
    font-weight:800;
}

.modal-footer{
    background:#f7faff;
    border-top:1px solid var(--border);
}

/* =========================================================
   NAV / TOOLBAR
   ========================================================= */

.toolbar,
.action-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 14px;
    background:#f4f8ff;
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:14px;
}

.action-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

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

.table-responsive,
.overflow-auto{
    scrollbar-width:thin;
    scrollbar-color:#79a7df #eaf2fb;
}

.table-responsive::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar{
    height:10px;
    width:10px;
}

.table-responsive::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track{
    background:#eaf2fb;
}

.table-responsive::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb{
    background:#79a7df;
    border-radius:10px;
}

/* =========================================================
   UTILITIES
   ========================================================= */

.bg-soft-blue{
    background:#eef6ff !important;
}

.border-blue{
    border:1px solid var(--border-dark) !important;
}

.section-title{
    color:var(--primary-dark);
    font-weight:800;
    border-left:4px solid var(--primary);
    padding-left:10px;
}

.sticky-topbar{
    position:sticky;
    top:0;
    z-index:1020;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
}

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

@media (max-width: 991.98px){
    .container-fluid{
        padding:10px !important;
    }

    .page-wrap,
    .page-wrapper,
    .main-wrapper,
    .content-wrapper{
        padding:14px;
        min-height:calc(100vh - 20px);
    }

    .card-body{
        padding:14px;
    }
}

@media (max-width: 767.98px){
    body{
        font-size:13px;
    }

    .container-fluid{
        padding:7px !important;
    }

    .page-wrap,
    .page-wrapper,
    .main-wrapper,
    .content-wrapper{
        padding:10px;
        border-radius:9px;
        min-height:calc(100vh - 14px);
    }

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

    .btn{
        min-height:36px;
    }

    .table thead th,
    .table tbody td{
        font-size:11px;
        padding:8px;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print{
    @page{
        size:auto;
        margin:8mm;
    }

    body{
        background:#fff !important;
        color:#000;
    }

    .no-print,
    .btn,
    .toolbar,
    .action-bar{
        display:none !important;
    }

    .container,
    .container-fluid{
        padding:0 !important;
    }

    .page-wrap,
    .page-wrapper,
    .main-wrapper,
    .content-wrapper{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        min-height:auto;
        border:none !important;
        box-shadow:none !important;
        background:#fff !important;
    }

    .card{
        border:1px solid #999 !important;
        box-shadow:none !important;
        break-inside:avoid;
    }

    .table thead th{
        background:#0d6efd !important;
        color:#fff !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .group-header td{
        background:#084298 !important;
        color:#fff !important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}

/* =========================================================
   INDEX APP SHELL / SIDEBAR
   ========================================================= */

.app-body{
    margin:0;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
    background:#eef6ff;
}

.app-shell{
    display:flex;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.app-sidebar{
    width:270px;
    min-width:270px;
    height:100vh;
    overflow-y:auto;
    padding:14px;
    background:linear-gradient(180deg,#052c65 0%,#084298 55%,#052c65 100%);
    border-right:1px solid rgba(255,255,255,.16);
    box-shadow:5px 0 18px rgba(5,44,101,.18);
}

.app-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;
    background:rgba(255,255,255,.09);
}

.app-brand img{
    width:44px;
    height:44px;
    flex:0 0 44px;
    object-fit:contain;
    padding:4px;
    border-radius:9px;
    background:#fff;
}

.app-brand-title{
    min-width:0;
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
}

.app-brand-title span{
    display:block;
    margin-top:3px;
    color:#dbeafe;
    font-size:10px;
    font-weight:600;
}

.app-menu-title{
    margin:16px 8px 7px;
    color:#bfdbfe;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.app-nav-link{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:10px 12px;
    margin-bottom:7px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    color:#eaf3ff;
    background:rgba(255,255,255,.06);
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    transition:.18s ease;
}

.app-nav-link i{
    width:18px;
    flex:0 0 18px;
    text-align:center;
}

.app-nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.20);
    transform:translateX(2px);
}

.app-nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,#0b5ed7,#0d6efd);
    border-color:#6ea8fe;
    box-shadow:0 5px 14px rgba(13,110,253,.30);
}

.app-content{
    flex:1;
    min-width:0;
    height:100vh;
    overflow:hidden;
    background:#eef6ff;
}

.app-content iframe{
    display:block;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    border:0;
    background:#fff;
}

/* Elak global container-fluid mengganggu shell */
.app-body > .container-fluid{
    padding:0 !important;
}


/* =========================================================
   LOGIN INDEX
   ========================================================= */

.login-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:linear-gradient(135deg,#dbeafe 0%,#eff6ff 45%,#cfe3ff 100%);
}

.login-card{
    width:100%;
    max-width:430px;
    overflow:hidden;
    border:1px solid var(--border-dark);
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 48px rgba(5,44,101,.18);
}

.login-card-header{
    padding:22px 24px 18px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-deep),var(--primary));
}

.login-card-header h5{
    color:#fff;
}

.login-card-body{
    padding:24px;
}

.login-logo{
    display:block;
    width:220px;
    max-width:80%;
    max-height:120px;
    height:auto;
    margin:0 auto 14px;
    object-fit:contain;
    padding:7px;
    border-radius:10px;
    background:#fff;
}

.login-links{
    display:grid;
    gap:8px;
    margin-top:16px;
}


/* =========================================================
   NAV TABS STANDARD
   ========================================================= */

.nav-tabs{
    width:100%;
    border-bottom:1px solid var(--border);
    gap:4px;
    flex-wrap:wrap;
}

.nav-tabs .nav-link{
    color:var(--primary-dark);
    font-weight:700;
    border-radius:8px 8px 0 0;
}

.nav-tabs .nav-link:hover{
    border-color:var(--border);
    background:#eef6ff;
}

.nav-tabs .nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,#084298,#0d6efd);
    border-color:#0d6efd;
}


/* =========================================================
   MODULE EMBED / IFRAME
   ========================================================= */

.loading-panel{
    display:none;
    width:100%;
    text-align:center;
    padding:40px 20px;
    color:var(--primary-dark);
}

.module-frame-wrap{
    display:block;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:720px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
}

.module-frame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:100% !important;
    height:720px !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff;
}


/* =========================================================
   FIX DATA KOKURIKULUM UNIT IFRAME
   ========================================================= */

#iframeSection{
    display:block;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

#iframeSection.d-none{
    display:none !important;
}

#contentFrame{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:100% !important;
    height:720px !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
}

#dataCard{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

#dataCard > .card-body{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    overflow:hidden;
}

#tabs{
    width:100% !important;
    max-width:none !important;
    flex-wrap:wrap;
}


/* =========================================================
   EMBEDDED PAGE FULL WIDTH
   Untuk page yang dibuka dalam iframe
   ========================================================= */

body.embed-page .container,
body.embed-page .container-fluid,
body.embed-page .page-wrap,
body.embed-page .page-wrapper,
body.embed-page .main-wrapper,
body.embed-page .content-wrapper{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

body.embed-page .container-fluid{
    padding:8px !important;
}

body.embed-page .page-wrap,
body.embed-page .page-wrapper,
body.embed-page .main-wrapper,
body.embed-page .content-wrapper{
    min-height:auto !important;
}


/* =========================================================
   RESPONSIVE APP / IFRAME
   ========================================================= */

@media (max-width:991.98px){

    .app-sidebar{
        width:235px;
        min-width:235px;
    }

    .module-frame-wrap,
    #iframeSection{
        min-height:650px;
    }

    .module-frame,
    #contentFrame{
        height:650px !important;
    }
}

@media (max-width:767.98px){

    .app-body{
        height:auto;
        overflow:auto;
    }

    .app-shell{
        display:block;
        height:auto;
        min-height:100vh;
        overflow:visible;
    }

    .app-sidebar{
        width:100%;
        min-width:0;
        height:auto;
        max-height:none;
    }

    .app-content{
        width:100%;
        height:70vh;
        min-height:600px;
    }

    .module-frame-wrap,
    #iframeSection{
        min-height:600px;
    }

    .module-frame,
    #contentFrame{
        height:600px !important;
    }
}


/* =========================================================
   PRINT EXTENSIONS
   ========================================================= */

@media print{

    .hide-print{
        display:none !important;
    }

    .app-sidebar{
        display:none !important;
    }

    .app-content{
        width:100% !important;
        height:auto !important;
    }

    .module-frame-wrap,
    #iframeSection{
        border:0 !important;
    }
}