/* =====================================================
   NURHAN CRM - GLOBAL STYLE
===================================================== */


:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --danger:#dc2626;
    --warning:#f59e0b;

    --dark:#111827;
    --text:#1f2937;
    --muted:#6b7280;

    --bg:#f5f7fb;
    --white:#ffffff;

    --radius:16px;

}


/* RESET */

*{

    box-sizing:border-box;

}


body{

    margin:0;

    background:var(--bg);

    color:var(--text);

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

}



/* =====================================================
   LAYOUT
===================================================== */


.wrapper{

    display:flex;

    min-height:100vh;

}


.main{

    flex:1;

    width:100%;

}


.content{

    padding:30px;

}




.page-title{

    font-size:28px;

    font-weight:700;

    margin-bottom:25px;

}





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


.sidebar{

    width:250px;

    min-height:100vh;

    background:

    linear-gradient(
    180deg,
    #111827,
    #1f2937
    );

    color:white;

    flex-shrink:0;

}



.sidebar h4{

    padding:25px 15px;

    margin:0;

    text-align:center;

    font-weight:800;

    border-bottom:

    1px solid rgba(255,255,255,.1);

}



.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    color:#d1d5db;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

}



.sidebar a i{

    font-size:20px;

}



.sidebar a:hover{

    background:

    rgba(255,255,255,.08);

    color:white;

}



.sidebar a.active{

    background:var(--primary);

    color:white;

}




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


.card,
.crm-card{

    border:none;

    border-radius:var(--radius);

    background:white;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}



.card-body{

    padding:25px;

}




/* Hover kartlar */


.quick-card{

    transition:.25s;

}



.quick-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}





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


.btn{

    border-radius:12px;

    padding:10px 18px;

    font-weight:600;

    transition:.2s;

}



.btn:hover{

    transform:translateY(-1px);

}



.btn-success{

    background:var(--success);

    border:none;

}



.btn-primary{

    background:var(--primary);

    border:none;

}



.btn-danger{

    background:var(--danger);

    border:none;

}





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


.form-control,
.form-select{

    border-radius:12px;

    padding:12px 15px;

    border:

    1px solid #e5e7eb;

    background:white;

}



.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 .2rem rgba(37,99,235,.15);

}



label{

    font-weight:600;

    margin-bottom:8px;

    color:#374151;

}





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


.table{

    vertical-align:middle;

}



.table thead th{

    background:#f8fafc;

    color:#64748b;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

}



.table tbody tr{

    transition:.2s;

}



.table tbody tr:hover{

    background:#f8fafc;

}





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


.badge{

    border-radius:20px;

    padding:7px 12px;

    font-size:12px;

}




.status-badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}



.status-badge.printed{

    background:#dcfce7;

    color:#166534;

}



.status-badge.waiting{

    background:#fef3c7;

    color:#92400e;

}




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


.action-btn{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

}




/* =====================================================
   INPUT GROUP
===================================================== */


.input-group-text{

    border-radius:12px 0 0 12px;

    background:#f8fafc;

}



/* =====================================================
   IMAGE
===================================================== */


img{

    max-width:100%;

}

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


.stat-card{

    display:flex;

    align-items:center;

    gap:20px;

}



.stat-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:white;

    font-size:25px;

}



.stat-title{

    color:var(--muted);

    font-size:14px;

}



.stat-value{

    font-size:28px;

    font-weight:800;

}





/* Dashboard hızlı işlemler */


.quick-card{

    height:100%;

}



.quick-card i{

    font-size:40px;

}




/* Grafik */


.chart-container,
.chart-box{

    width:280px;

    height:280px;

    margin:auto;

}



.chart-container canvas,
.chart-box canvas,
#salesChart{

    max-height:280px!important;

}





/* =====================================================
   SİPARİŞ MOBİL KART
===================================================== */


.mobile-orders{

    display:none;

}



.order-mobile-card{

    background:white;

    padding:20px;

    border-radius:18px;

    margin-bottom:15px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.07);

}



.order-number{

    font-size:12px;

    background:#f1f5f9;

    padding:6px 10px;

    border-radius:10px;

    color:#475569;

    font-weight:600;

}



.order-mobile-card h5{

    font-size:18px;

    font-weight:700;

    margin-top:15px;

}



.order-mobile-card p{

    color:#64748b;

    margin-bottom:8px;

}



.mobile-actions{

    display:flex;

    gap:8px;

}



.mobile-actions .btn{

    flex:1;

    padding:10px 5px;

    font-size:13px;

}





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


.login-body{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    #eff6ff,
    #f8fafc
    );

}



.login-container{

    width:100%;

    padding:20px;

}



.login-card{

    max-width:420px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}



.login-logo{

    text-align:center;

    margin-bottom:30px;

}



.logo-circle{

    width:75px;

    height:75px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:35px;

    font-weight:800;

}



.login-logo h2{

    margin-top:15px;

    font-weight:800;

}



.login-card .btn{

    width:100%;

    padding:14px;

}





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


.print-page{

    width:420px;

    margin:30px auto;

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.1);

}



.company{

    text-align:center;

    font-size:28px;

    font-weight:800;

}



.sub{

    text-align:center;

    color:#64748b;

}



.line{

    border-bottom:

    2px dashed #cbd5e1;

    margin:15px 0;

}



.info{

    line-height:28px;

}



.order-box{

    background:#f8fafc;

    padding:15px;

    border-radius:12px;

    min-height:100px;

}



.total{

    font-size:22px;

    font-weight:800;

    color:var(--success);

}



.print-btn{

    width:100%;

    margin-top:20px;

    padding:14px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:12px;

}



@media print{


.print-btn{

    display:none;

}



.print-page{

    box-shadow:none;

    width:100%;

}


}




/* =====================================================
   MOBİL
===================================================== */


.mobile-menu-btn{

    display:none;

}




.sidebar-overlay{

    display:none;

}





@media(max-width:768px){



.content{

    padding:15px;

}



.page-title{

    font-size:22px;

}




/* sidebar */


.mobile-menu-btn{

    display:block;

    position:fixed;

    top:15px;

    left:15px;

    z-index:1200;

    width:45px;

    height:45px;

    border-radius:12px;

    border:0;

    background:#111827;

    color:white;

    font-size:25px;

}



.sidebar{

    position:fixed;

    left:-280px;

    top:0;

    height:100vh;

    width:260px;

    z-index:1300;

    transition:.3s;

}



.sidebar.active{

    left:0;

}



.sidebar-overlay{

    position:fixed;

    inset:0;

    background:

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

    z-index:1250;

}



.sidebar-overlay.active{

    display:block;

}





.main{

    width:100%;

}





/* sipariş tablo mobil */


.desktop-table{

    display:none;

}



.mobile-orders{

    display:block;

}





.form-control,
.form-select{

    font-size:16px;

}



.btn{

    padding:12px;

}




.login-card{

    padding:25px;

}



.print-page{

    width:95%;

}



}

#commission{
font-size:22px;
font-weight:700;
color:#16a34a;
}