/* ==========================================================
   FLYPORTAL
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#f4f6f9;

    color:#333;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================================
   WRAPPER
========================================================== */

.wrapper{

    width:100%;

    min-height:100vh;

}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:250px;

    height:100vh;

    background:#1f2937;

    overflow-y:auto;

}

.sidebar-logo{

    padding:25px;

    text-align:center;

    color:#fff;

    font-size:22px;

    font-weight:bold;

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

}

.sidebar ul{

    list-style:none;

}

.sidebar ul li{

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

}

.sidebar ul li a{

    display:block;

    color:#fff;

    padding:15px 20px;

    transition:.3s;

}

.sidebar ul li a:hover{

    background:#374151;

}

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

.top-navbar{

    position:fixed;

    left:250px;

    right:0;

    top:0;

    height:70px;

    background:#fff;

    border-bottom:1px solid #ddd;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    z-index:99;

}

.navbar-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.navbar-right{

    display:flex;

    align-items:center;

}

.navbar-user{

    display:flex;

    align-items:center;

    gap:15px;

}

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

.content-wrapper{

    margin-left:250px;

    margin-top:70px;

    padding:25px;

}

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

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

/* ==========================================================
   CARDS
========================================================== */

.dashboard-cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.card{

    background:#fff;

    border-radius:10px;

    padding:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.card-title{

    font-size:14px;

    color:#777;

}

.card-value{

    margin-top:10px;

    font-size:30px;

    font-weight:bold;

}

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

.table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.table th{

    background:#1f2937;

    color:#fff;

    padding:12px;

    text-align:left;

}

.table td{

    padding:12px;

    border-bottom:1px solid #eee;

}

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

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

.form-control{

    width:100%;

    height:45px;

    border:1px solid #ccc;

    border-radius:5px;

    padding:0 12px;

    outline:none;

}

textarea.form-control{

    height:150px;

    padding:10px;

    resize:vertical;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-block;

    padding:10px 18px;

    border:none;

    border-radius:5px;

    cursor:pointer;

    transition:.3s;

}

.btn:hover{

    opacity:.9;

}

.btn-primary{

    background:#2563eb;

    color:#fff;

}

.btn-success{

    background:#16a34a;

    color:#fff;

}

.btn-danger{

    background:#dc2626;

    color:#fff;

}

.btn-warning{

    background:#f59e0b;

    color:#fff;

}

.btn-secondary{

    background:#6b7280;

    color:#fff;

}

.btn-sm{

    padding:7px 12px;

    font-size:13px;

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-block;

    padding:5px 10px;

    border-radius:30px;

    font-size:12px;

    color:#fff;

}

.badge-success{

    background:#16a34a;

}

.badge-danger{

    background:#dc2626;

}

.badge-warning{

    background:#f59e0b;

}

.badge-primary{

    background:#2563eb;

}

.badge-info{

    background:#0891b2;

}

.badge-secondary{

    background:#6b7280;

}

.badge-dark{

    background:#111827;

}

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

.alert{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:6px;

    margin-bottom:20px;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;

}

.alert-warning{

    background:#fef3c7;

    color:#92400e;

}

.alert-info{

    background:#dbeafe;

    color:#1d4ed8;

}

.alert-message{

    flex:1;

}

.alert-close{

    border:none;

    background:none;

    cursor:pointer;

    font-size:20px;

}

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

.login-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:#eef2f7;

}

.login-box{

    width:420px;

    background:#fff;

    padding:35px;

    border-radius:10px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.login-logo{

    text-align:center;

    margin-bottom:25px;

}

.btn-block{

    width:100%;

}

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

.error-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.error-box{

    text-align:center;

}

.error-code{

    font-size:120px;

    font-weight:bold;

    color:#2563eb;

}






/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:991px){

    .sidebar{

        position:fixed;
        top:70px;
        left:0;
        width:250px;
        height:calc(100vh - 70px);
        overflow-y:auto;
        background:#1f2937;
        z-index:1000;

    }

    .top-navbar{

        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:70px;
        z-index:1001;

    }

    .content-wrapper{

        margin-top:70px;
        margin-left:250px;
        padding:20px;

    }

    .dashboard-cards{

        grid-template-columns:1fr;

    }

    .table{

        display:block;
        overflow-x:auto;

    }

}



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

.mt-20{

    margin-top:20px;

}

.text-center{

    text-align:center;

}

.d-none{

    display:none;

}