/* ==========================================================
   AJ REFERRALS CRM
   Design System
========================================================== */

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

:root{

    --primary:#0B8F5A;
    --primary-dark:#08744a;

    --secondary:#1F2937;

    --background:#F4F6F9;

    --white:#FFFFFF;

    --border:#E5E7EB;

    --text:#374151;

    --text-light:#6B7280;

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

    --radius:12px;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text);

}

.wrapper{

    display:flex;

    width:100%;

    min-height:100vh;

}

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

.sidebar{

    width:260px;

    background:var(--primary);

    color:#FFF;

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    overflow-y:auto;

}

.logo{

    padding:30px 20px;

    text-align:center;

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

}

.logo img{

    width:70px;

    margin-bottom:15px;

}

.logo h2{

    font-size:22px;

    font-weight:700;

}

.menu{

    margin-top:20px;

}

.menu a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#FFF;

    text-decoration:none;

    padding:15px 25px;

    transition:.25s;

}

.menu a:hover{

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

}

.menu span{

    font-size:15px;

}

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

.main{

    margin-left:260px;

    width:calc(100% - 260px);

    min-height:100vh;

}

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

.content{

    padding:35px;

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

.topbar{

    height:80px;

    background:#FFF;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    box-shadow:var(--shadow);

    position:sticky;

    top:0;

    z-index:99;

}

.page-title h1{

    font-size:28px;

    font-weight:700;

    color:var(--secondary);

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

/* ==========================================================
   PESQUISA
========================================================== */

.search-form{

    display:flex;

    align-items:center;

}

.search-form input{

    width:320px;

    padding:12px 18px;

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

    border-radius:30px;

    outline:none;

    transition:.25s;

    font-size:14px;

}

.search-form input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(11,143,90,.15);

}

/* ==========================================================
   ADMIN
========================================================== */

.admin-box{

    display:flex;

    align-items:center;

    gap:12px;

}

.admin-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--primary);

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    font-size:18px;

}

.admin-info{

    display:flex;

    flex-direction:column;

}

.admin-info strong{

    font-size:15px;

}

.admin-info small{

    color:var(--text-light);

}

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

.cards{

    display:grid;

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

    gap:25px;

    margin-bottom:35px;

}

.card{

    background:#FFF;

    border-radius:var(--radius);

    padding:25px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.card:hover{

    transform:translateY(-5px);

}

.card-title{

    color:var(--text-light);

    margin-bottom:12px;

    font-size:14px;

}

.card-value{

    font-size:36px;

    font-weight:700;

    color:var(--primary);

}

.card-footer{

    margin-top:18px;

    color:var(--text-light);

    font-size:13px;

}

/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

}

.panel{

    background:#FFF;

    border-radius:var(--radius);

    padding:25px;

    box-shadow:var(--shadow);

}

.panel h2{

    margin-bottom:20px;

    font-size:20px;

}

/* ==========================================================
   LISTAS
========================================================== */

.list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.list-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

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

    border-radius:10px;

}

.list-item:hover{

    background:#fafafa;

}

/* ==========================================================
   STATUS
========================================================== */

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.badge-success{

    background:#DCFCE7;

    color:#15803D;

}

.badge-warning{

    background:#FEF3C7;

    color:#92400E;

}

.badge-danger{

    background:#FEE2E2;

    color:#B91C1C;

}
/* ==========================================================
   BOTÕES
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:#FFF;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-secondary{

    background:#6B7280;

    color:#FFF;

}

.btn-secondary:hover{

    background:#4B5563;

}

.btn-success{

    background:#16A34A;

    color:#FFF;

}

.btn-danger{

    background:#DC2626;

    color:#FFF;

}

.btn-warning{

    background:#F59E0B;

    color:#FFF;

}

.btn-outline{

    background:#FFF;

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

    color:var(--text);

}

.btn-outline:hover{

    background:#F9FAFB;

}

/* ==========================================================
   FORMULÁRIOS
========================================================== */

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--secondary);

}

.form-control{

    width:100%;

    padding:13px 15px;

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

    border-radius:10px;

    outline:none;

    transition:.25s;

    font-size:14px;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(11,143,90,.12);

}

/* ==========================================================
   SELECT
========================================================== */

select.form-control{

    cursor:pointer;

}

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

textarea.form-control{

    resize:vertical;

    min-height:120px;

}

/* ==========================================================
   ALERTAS
========================================================== */

.alert{

    padding:15px 20px;

    border-radius:10px;

    margin-bottom:25px;

    font-weight:500;

}

.alert-success{

    background:#DCFCE7;

    color:#166534;

}

.alert-danger{

    background:#FEE2E2;

    color:#991B1B;

}

.alert-warning{

    background:#FEF3C7;

    color:#92400E;

}

.alert-info{

    background:#DBEAFE;

    color:#1D4ED8;

}

/* ==========================================================
   TABELAS
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    background:#FFF;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.table thead{

    background:var(--primary);

    color:#FFF;

}

.table th{

    padding:16px;

    text-align:left;

    font-size:14px;

}

.table td{

    padding:15px;

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

    font-size:14px;

}

.table tbody tr:hover{

    background:#F9FAFB;

}

/* ==========================================================
   AÇÕES
========================================================== */

.actions{

    display:flex;

    gap:10px;

}

.actions a{

    text-decoration:none;

}

/* ==========================================================
   PAGINAÇÃO
========================================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:30px;

}

.pagination a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    text-decoration:none;

    background:#FFF;

    color:var(--text);

    box-shadow:var(--shadow);

}

.pagination a.active{

    background:var(--primary);

    color:#FFF;

}

/* ==========================================================
   MODAIS
========================================================== */

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999;

}

.modal-content{

    width:650px;

    max-width:95%;

    background:#FFF;

    border-radius:12px;

    padding:30px;

    box-shadow:var(--shadow);

}

/* ==========================================================
   UPLOAD
========================================================== */

.upload-box{

    border:2px dashed #D1D5DB;

    border-radius:12px;

    padding:45px;

    text-align:center;

    cursor:pointer;

    transition:.25s;

}

.upload-box:hover{

    border-color:var(--primary);

    background:#F8FFFB;

}

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

.mini-card{

    background:#FFF;

    padding:18px;

    border-radius:12px;

    box-shadow:var(--shadow);

}

.mini-card h3{

    font-size:14px;

    color:var(--text-light);

    margin-bottom:8px;

}

.mini-card strong{

    font-size:26px;

    color:var(--primary);

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

.login-page{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0B8F5A,#08744a);

}

.login-card{

    width:420px;

    background:#FFF;

    border-radius:18px;

    padding:45px;

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

}

.login-logo{

    text-align:center;

    margin-bottom:35px;

}

.login-logo img{

    width:90px;

}

.login-logo h2{

    margin-top:20px;

    color:var(--secondary);

}

.login-card button{

    width:100%;

}

/* ==========================================================
   UTILITÁRIOS
========================================================== */

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

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

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

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

.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}

.text-success{color:#16A34A;}
.text-danger{color:#DC2626;}
.text-warning{color:#D97706;}
.text-primary{color:var(--primary);}
.text-muted{color:#6B7280;}

.w-100{width:100%;}

.d-flex{display:flex;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.align-center{align-items:center;}
.flex-column{flex-direction:column;}

.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}

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

.badge-blue{

    background:#DBEAFE;

    color:#1D4ED8;

}

.badge-green{

    background:#DCFCE7;

    color:#15803D;

}

.badge-red{

    background:#FEE2E2;

    color:#B91C1C;

}

.badge-orange{

    background:#FED7AA;

    color:#C2410C;

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#CFCFCF;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#999;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

.fade{

    animation:fade .35s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   LOADER
========================================================== */

.loader{

    width:42px;

    height:42px;

    border:4px solid #DDD;

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

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:1200px){

    .cards{

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

    }

}

@media(max-width:900px){

    .sidebar{

        width:80px;

    }

    .sidebar span{

        display:none;

    }

    .logo h2{

        display:none;

    }

    .main{

        margin-left:80px;

        width:calc(100% - 80px);

    }

}

@media(max-width:768px){

    .topbar{

        flex-direction:column;

        align-items:flex-start;

        height:auto;

        padding:20px;

        gap:20px;

    }

    .topbar-right{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .search-form input{

        width:100%;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:500px){

    .content{

        padding:20px;

    }

}

/* ==========================================================
   FIM
========================================================== */