/* ==========================================================
   Voxterisk CRM
   Main Application Stylesheet
   Version: 1.0.0
========================================================== */

:root{

    --primary:#6C5CE7;
    --primary-dark:#5A4BD1;

    --secondary:#3B82F6;

    --success:#10B981;
    --danger:#EF4444;
    --warning:#F59E0B;
    --info:#06B6D4;

    --bg:#0F172A;
    --bg2:#1E293B;
    --card:#111827;

    --border:#334155;

    --text:#F8FAFC;
    --muted:#94A3B8;

    --radius:14px;

    --shadow:
        0 20px 45px rgba(0,0,0,.30);

    --transition:.25s;
}

/* ========================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

/* ========================================================== */

html{

    font-size:15px;

    scroll-behavior:smooth;

}

/* ========================================================== */

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    min-height:100vh;

}

/* ========================================================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ========================================================== */

img{

    max-width:100%;

}

/* ========================================================== */

.wrapper{

    display:flex;

    min-height:100vh;

}

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

.sidebar{

    width:260px;

    background:var(--card);

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

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    overflow-y:auto;

    z-index:100;

}

.sidebar-header{

    padding:28px;

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

}

.logo{

    color:#fff;

    font-size:28px;

    font-weight:700;

}

/* ========================================================== */

.sidebar-menu{

    padding:20px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:12px;

    color:var(--muted);

    margin-bottom:8px;

    transition:var(--transition);

}

.sidebar-menu a:hover{

    background:var(--primary);

    color:#fff;

}

.sidebar-menu a.active{

    background:var(--primary);

    color:#fff;

}

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

.main-content{

    flex:1;

    margin-left:260px;

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   TOPBAR
========================================================== */

.topbar{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    background:var(--card);

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

}

.page-title{

    font-size:22px;

    font-weight:600;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

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

.content{

    padding:30px;

}

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

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:25px;

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

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

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

.btn{

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-warning{

    background:var(--warning);

    color:#fff;

}

.btn-info{

    background:var(--info);

    color:#fff;

}

/* ==========================================================
   FORMS
========================================================== */

.form-control{

    width:100%;

    padding:12px 15px;

    background:#0B1220;

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

    border-radius:10px;

    color:#fff;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(108,92,231,.25);

}

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

/* ==========================================================
   TABLES
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table thead{

    background:#182235;

}

.table th{

    padding:14px;

    text-align:left;

}

.table td{

    padding:14px;

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

}

.table tbody tr:hover{

    background:#172033;

}

/* ==========================================================
   ALERTS
========================================================== */

.alert{

    padding:14px 18px;

    border-radius:10px;

    margin-bottom:20px;

}

.alert-success{

    background:#065F46;

}

.alert-danger{

    background:#7F1D1D;

}

.alert-warning{

    background:#78350F;

}

.alert-info{

    background:#164E63;

}

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

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

}

.badge-success{

    background:var(--success);

}

.badge-danger{

    background:var(--danger);

}

.badge-warning{

    background:var(--warning);

}

.badge-info{

    background:var(--info);

}

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

.text-center{

    text-align:center;

}

.text-muted{

    color:var(--muted);

}

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

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

.d-flex{

    display:flex;

}

.justify-between{

    justify-content:space-between;

}

.align-center{

    align-items:center;

}

.w-100{

    width:100%;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:20px;

}

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

@media(max-width:992px){

    .sidebar{

        width:80px;

    }

    .sidebar .logo{

        display:none;

    }

    .sidebar-menu a{

        justify-content:center;

    }

    .sidebar-menu a span{

        display:none;

    }

    .main-content{

        margin-left:80px;

    }

}

@media(max-width:768px){

    .sidebar{

        display:none;

    }

    .main-content{

        margin-left:0;

    }

    .topbar{

        padding:15px;

        height:auto;

        flex-direction:column;

        gap:10px;

    }

    .content{

        padding:15px;

    }

}