/*=========================================================
    SIKFA STUDENT PORTAL
    PartaSystem
=========================================================*/

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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    direction:rtl;

    overflow:hidden;

    font-family:'IRANSans',Tahoma,sans-serif;

    background:#F5F7FA;

    color:#202124;

    font-size:14px;

    line-height:1.6;

}

/*==============================
ROOT
==============================*/

:root{

    --primary:#0F6CBD;

    --primary-dark:#0A4F91;

    --secondary:#F5F7FA;

    --background:#FFFFFF;

    --sidebar:#FFFFFF;

    --header:#FFFFFF;

    --border:#E4E8EE;

    --shadow:0 8px 20px rgba(0,0,0,.08);

    --shadow-hover:0 12px 25px rgba(0,0,0,.12);

    --radius:14px;

    --transition:.25s ease;

}

/*==============================
LINK
==============================*/

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

/*==============================
APP
==============================*/

#app{

    display:flex;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

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

#sidebar{

    width:260px;

    background:var(--sidebar);

    border-left:1px solid var(--border);

    display:flex;

    flex-direction:column;

    transition:.3s;

    box-shadow:var(--shadow);

    z-index:100;

}

.logo-area{

    height:85px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-bottom:1px solid var(--border);

}

.logo{

    width:52px;

    height:52px;

    object-fit:contain;

}

.portal-title{

    margin-top:8px;

    font-size:15px;

    font-weight:bold;

    color:var(--primary);

}

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

nav{

    flex:1;

    padding:20px 12px;

}

nav ul li{

    margin-bottom:6px;

}

.menu{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:12px;

    transition:var(--transition);

    color:#555;

    font-size:14px;

}

.menu:hover{

    background:#EEF5FC;

    color:var(--primary);

}

.menu.active{

    background:var(--primary);

    color:#FFF;

    box-shadow:0 5px 15px rgba(15,108,189,.35);

}

.menu span{

    font-size:18px;

    width:24px;

    text-align:center;

}

/*==============================
MAIN
==============================*/

#main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

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

#header{

    height:72px;

    background:var(--header);

    border-bottom:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    box-shadow:var(--shadow);

    z-index:50;

}

.header-left{

    display:flex;

    align-items:center;

}

.menu-toggle{

    width:42px;

    height:42px;

    border:none;

    background:#EEF5FC;

    border-radius:10px;

    cursor:pointer;

    transition:var(--transition);

    font-size:20px;

}

.menu-toggle:hover{

    background:var(--primary);

    color:#FFF;

}

.header-title{

    margin-right:18px;

    display:flex;

    flex-direction:column;

}

.header-title{

    font-size:18px;

    font-weight:bold;

}

.header-subtitle{

    color:#888;

    font-size:12px;

}

/*==============================
STUDENT BOX
==============================*/

.header-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.student-box{

    display:flex;

    align-items:center;

}

.student-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:bold;

}

.student-info{

    margin-right:12px;

}

.student-name{

    font-weight:bold;

    font-size:14px;

}

.student-code{

    font-size:12px;

    color:#888;

}

/*==============================
LOGOUT
==============================*/

.logout-button{

    border:none;

    background:#E53935;

    color:#FFF;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:var(--transition);

}

.logout-button:hover{

    background:#C62828;

}

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

#pageContainer{

    flex:1;

    overflow:auto;

    padding:28px;

    background:#F5F7FA;

}

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

#pageContent{

    animation:fadeIn .25s;

}

/*==============================
FOOTER
==============================*/

#footer{

    height:42px;

    background:#FFF;

    border-top:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    font-size:12px;

    color:#777;

}

/*==============================
ANIMATION
==============================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-thumb{

    background:#B9C3CF;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#97A6B8;

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

.dashboard{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

    margin-bottom:30px;

}

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

.card{

    background:#FFFFFF;

    border-radius:16px;

    box-shadow:var(--shadow);

    padding:22px;

    transition:.25s;

    position:relative;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:6px;

    height:100%;

    background:var(--primary);

}

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

.stat-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.stat-title{

    font-size:13px;

    color:#888;

    margin-bottom:8px;

}

.stat-value{

    font-size:28px;

    font-weight:bold;

    color:#222;

}

.stat-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    background:#EEF5FC;

    color:var(--primary);

}

/*=========================================================
    SUMMARY
=========================================================*/

.summary-box{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:18px;

    margin-bottom:28px;

}

.summary-item{

    background:#FFF;

    border-radius:14px;

    padding:18px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.25s;

}

.summary-item:hover{

    transform:translateY(-3px);

}

.summary-number{

    font-size:26px;

    font-weight:bold;

    color:var(--primary);

}

.summary-text{

    margin-top:8px;

    color:#666;

    font-size:13px;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

    font-family:inherit;

}

.btn-primary{

    background:var(--primary);

    color:#FFF;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-success{

    background:#28A745;

    color:#FFF;

}

.btn-success:hover{

    background:#218838;

}

.btn-danger{

    background:#DC3545;

    color:#FFF;

}

.btn-danger:hover{

    background:#C82333;

}

.btn-warning{

    background:#FFC107;

    color:#333;

}

.btn-warning:hover{

    background:#E0A800;

}

.btn-secondary{

    background:#ECEFF3;

    color:#555;

}

.btn-secondary:hover{

    background:#DDE3EA;

}

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

.form-group{

    margin-bottom:20px;

}

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

    color:#555;

}

.form-control{

    width:100%;

    height:46px;

    border:1px solid #D8DFE7;

    border-radius:10px;

    padding:0 14px;

    font-family:inherit;

    transition:.25s;

    background:#FFF;

}

.form-control:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:0 0 0 4px rgba(15,108,189,.12);

}

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

textarea.form-control{

    min-height:120px;

    resize:vertical;

    padding-top:12px;

}

/*=========================================================
    SELECT2
=========================================================*/

.select2-container{

    width:100%!important;

}

.select2-container--default .select2-selection--single{

    height:46px;

    border:1px solid #D8DFE7;

    border-radius:10px;

}

.select2-container--default .select2-selection__rendered{

    line-height:44px;

    padding-right:12px;

}

.select2-container--default .select2-selection__arrow{

    height:44px;

}

.select2-dropdown{

    border-radius:10px;

    border:1px solid #D8DFE7;

    overflow:hidden;

}

.select2-search__field{

    border:none!important;

    outline:none!important;

}

/*=========================================================
    PANEL
=========================================================*/

.panel{

    background:#FFF;

    border-radius:16px;

    box-shadow:var(--shadow);

    padding:24px;

    margin-bottom:25px;

}

.panel-title{

    font-size:18px;

    font-weight:bold;

    color:#222;

    margin-bottom:18px;

    display:flex;

    align-items:center;

}

.panel-title::before{

    content:"";

    width:5px;

    height:24px;

    background:var(--primary);

    border-radius:10px;

    margin-left:12px;

}

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

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}

.badge-success{

    background:#D4EDDA;

    color:#155724;

}

.badge-danger{

    background:#F8D7DA;

    color:#721C24;

}

.badge-warning{

    background:#FFF3CD;

    color:#856404;

}

.badge-primary{

    background:#E8F1FC;

    color:var(--primary);

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

.table-container{

    width:100%;

    overflow:auto;

    border-radius:16px;

    background:#FFF;

    box-shadow:var(--shadow);

}

.table{

    width:100%;

    border-collapse:collapse;

    min-width:900px;

}

.table thead{

    background:var(--primary);

    color:#FFF;

}

.table thead th{

    padding:16px;

    font-size:14px;

    font-weight:bold;

    text-align:center;

    white-space:nowrap;

}

.table tbody tr{

    transition:.20s;

    border-bottom:1px solid #EDF1F5;

}

.table tbody tr:hover{

    background:#F6FAFE;

}

.table tbody td{

    padding:14px;

    text-align:center;

    color:#444;

    font-size:13px;

    white-space:nowrap;

}

.table tbody tr:last-child{

    border-bottom:none;

}

/*=========================================================
    FINANCIAL TAB
=========================================================*/

.fin-tabs{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.fin-tab{

    padding:12px 24px;

    border-radius:12px;

    cursor:pointer;

    background:#EEF3F9;

    color:#666;

    transition:.25s;

    font-weight:bold;

}

.fin-tab:hover{

    background:#DDEAF8;

}

.fin-tab.active{

    background:var(--primary);

    color:#FFF;

}

.fin-content{

    display:none;

}

.fin-content.active{

    display:block;

    animation:fadeIn .25s;

}

/*=========================================================
    SEARCH
=========================================================*/

.search-box{

    position:relative;

    margin-bottom:18px;

}

.search-box input{

    width:100%;

    height:46px;

    border-radius:10px;

    border:1px solid #D8DFE7;

    padding:0 45px 0 15px;

}

.search-box input:focus{

    outline:none;

    border-color:var(--primary);

}

.search-icon{

    position:absolute;

    right:14px;

    top:12px;

    font-size:18px;

    color:#999;

}

/*=========================================================
    TOAST
=========================================================*/

#toastContainer{

    position:fixed;

    top:20px;

    right:20px;

    left:auto;

    z-index:9999;

}

.toast{

    min-width:320px;

    background:#FFF;

    border-radius:12px;

    box-shadow:var(--shadow-hover);

    padding:15px;

    display:flex;

    align-items:center;

    gap:12px;

    transform:translateX(450px);

    transition:.35s;

}

.toast.show{

    transform:translateX(0);

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

.modal-background{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:5000;

}

.modal-window{

    width:520px;

    background:#FFF;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    animation:fadeIn .25s;

}

.modal-header{

    background:var(--primary);

    color:#FFF;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

}

.modal-header button{

    border:none;

    background:none;

    color:#FFF;

    font-size:20px;

    cursor:pointer;

}

.modal-body{

    padding:24px;

    color:#444;

    line-height:2;

}

.modal-footer{

    padding:16px;

    text-align:left;

    border-top:1px solid #EEE;

}

/*=========================================================
    LOADING
=========================================================*/

#globalLoading{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.80);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9000;

}

.loading-box{

    text-align:center;

}

.spinner{

    width:60px;

    height:60px;

    border:5px solid #DCE6F2;

    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

.loading-message{

    margin-top:15px;

    color:#555;

    font-weight:bold;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
    SKELETON
=========================================================*/

.skeleton{

    background:linear-gradient(

            90deg,

            #ECECEC 25%,

            #F8F8F8 37%,

            #ECECEC 63%

    );

    background-size:400% 100%;

    animation:skeleton 1.4s infinite;

    border-radius:10px;

}

@keyframes skeleton{

    0%{

        background-position:100% 0;

    }

    100%{

        background-position:-100% 0;

    }

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

@media (max-width:1200px){

    #sidebar{

        width:220px;

    }

}

@media (max-width:992px){

    #sidebar{

        position:fixed;

        right:-260px;

        top:0;

        height:100%;

        z-index:3000;

    }

    #sidebar.show{

        right:0;

    }

    #overlay{

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        display:none;

        z-index:2500;

    }

    #overlay.show{

        display:block;

    }

    #header{

        padding:0 14px;

    }

    #pageContainer{

        padding:18px;

    }

}

@media (max-width:768px){

    .dashboard{

        grid-template-columns:1fr;

    }

    .summary-box{

        grid-template-columns:1fr;

    }

    .header-title{

        display:none;

    }

    .student-code{

        display:none;

    }

    .table{

        min-width:700px;

    }

}

@media (max-width:576px){

    .logout-button{

        padding:8px 12px;

        font-size:12px;

    }

    .student-name{

        font-size:13px;

    }

    .panel{

        padding:16px;

    }

}

/*=========================================================
    HIDDEN
=========================================================*/

.hidden{

    display:none !important;

}

/*=========================================================
    TEXT
=========================================================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.text-primary{

    color:var(--primary);

}

.text-danger{

    color:#DC3545;

}

.text-success{

    color:#28A745;

}

/*=========================================================
    MARGIN
=========================================================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.ml-10{margin-left:10px;}
.ml-20{margin-left:20px;}

.mr-10{margin-right:10px;}
.mr-20{margin-right:20px;}

/*=========================================================
    PADDING
=========================================================*/

.p-10{padding:10px;}
.p-15{padding:15px;}
.p-20{padding:20px;}
.p-25{padding:25px;}

/*=========================================================
    FLEX
=========================================================*/

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

/*=========================================================
    WIDTH
=========================================================*/

.w-100{

    width:100%;

}

/*=========================================================
    SHADOW
=========================================================*/

.shadow{

    box-shadow:var(--shadow);

}

.shadow-hover:hover{

    box-shadow:var(--shadow-hover);

}

/*=========================================================
    RADIUS
=========================================================*/

.round{

    border-radius:var(--radius);

}

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

.card{

    animation:cardIn .35s ease;

}

@keyframes cardIn{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    PAGE TRANSITION
=========================================================*/

.fade-enter{

    animation:fadeIn .25s;

}

/*=========================================================
    SCROLL TOP
=========================================================*/

#scrollTop{

    position:fixed;

    left:20px;

    bottom:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#FFF;

    cursor:pointer;

    display:none;

    box-shadow:var(--shadow);

    transition:.25s;

    z-index:1500;

}

#scrollTop:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/*=========================================================
    SESSION TIMER
=========================================================*/

#sessionTimer{

    position:fixed;

    bottom:20px;

    right:20px;

    background:#FFF;

    padding:10px 16px;

    border-radius:12px;

    box-shadow:var(--shadow);

    font-size:12px;

    color:#666;

    display:none;

    z-index:1400;

}