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

   ERP SAHIR - GLOBAL THEME CSS

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



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');




body{

    background:#f1f5f9;

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

    overflow-x:hidden;

    color:#0f172a;

}



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

   LAYOUT

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

.erp-wrapper{

    padding:15px;

}



.content-card,

.chart-box,

.topbar{

    background:white;

    border-radius:22px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 4px 20px rgba(0,0,0,0.05);

}



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

   NAVBAR

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



.modern-navbar{

    background:#0f172a;

    border:none;

    border-radius:18px;

    padding:10px 18px;

    margin-bottom:20px;

    box-shadow:0 4px 18px rgba(0,0,0,0.08);

}



.navbar-brand-area{

    display:flex;

    align-items:center;

    gap:15px;

}



.brand-title{

    color:white !important;

    font-weight:700;

    font-size:20px;

    text-decoration:none !important;

}



.brand-title i{

    margin-right:8px;

    color:#38bdf8;

}



.today-date{

    background:#1e293b;

    color:#e2e8f0;

    padding:6px 12px;

    border-radius:12px;

    font-size:13px;

}



.nav-link-custom{

    color:#cbd5e1 !important;

    text-decoration:none !important;

    padding:10px 16px !important;

    border-radius:12px;

    transition:0.3s;

    display:block;

    margin-right:8px;

    font-size:14px;

}



.nav-link-custom:hover{

    background:#1e293b;

    color:white !important;

}



.active-link{

    background:#2563eb;

    color:white !important;

}



.logout-btn{

    background:#dc2626;

    color:white !important;

    padding:10px 18px !important;

    border-radius:12px;

    text-decoration:none !important;

    transition:0.3s;

    display:block;

    font-size:14px;

}



.logout-btn:hover{

    background:#b91c1c;

}



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

   SIDEBAR

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



.sidebar{

    background:#0f172a;

    border-radius:22px;

    padding:20px;

    min-height:95vh;

    box-shadow:0 5px 25px rgba(0,0,0,0.08);

}



.sidebar h5{

    color:white;

    font-size:14px;

    margin-bottom:20px;

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

    padding-bottom:12px;

}



.sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}



.sidebar li{

    margin-bottom:6px;

}



.sidebar a{

    color:#cbd5e1 !important;

    text-decoration:none !important;

    display:block;

    padding:11px 14px;

    border-radius:12px;

    transition:0.3s;

    font-size:13px;

}



.sidebar a:hover{

    background:#1e293b;

    color:white !important;

    transform:translateX(3px);

}



.divider{

    border-top:1px solid rgba(255,255,255,0.08);

    margin:10px 0;

}



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

   TOPBAR

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



.topbar h3{

    margin:0;

    font-weight:700;

    color:#0f172a;

}



.topbar small{

    color:#64748b;

}



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

   KPI CARDS

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



.kpi-card{

    border-radius:20px;

    padding:20px;

    color:white;

    margin-bottom:20px;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}



.kpi-card p{

    margin:0;

    opacity:0.9;

    font-size:13px;

}



.kpi-card h2{

    margin-top:10px;

    font-weight:700;

}



.bg1{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

}



.bg2{

    background:linear-gradient(135deg,#059669,#047857);

}



.bg3{

    background:linear-gradient(135deg,#dc2626,#991b1b);

}



.bg4{

    background:linear-gradient(135deg,#7c3aed,#5b21b6);

}



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

   REPORT PANEL

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



.report-panel{

    background:#111827;

    border-radius:22px;

    padding:20px;

    min-height:95vh;

    box-shadow:0 5px 25px rgba(0,0,0,0.08);

}



.report-panel h5{

    color:white;

    margin-bottom:20px;

}



.report-panel a{

    display:block;

    background:#1f2937;

    color:#e5e7eb !important;

    text-decoration:none;

    padding:11px 14px;

    border-radius:12px;

    margin-bottom:10px;

    transition:0.3s;

    font-size:13px;

}



.report-panel a:hover{

    background:#374151;

    color:white !important;

}



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

   TABLES

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



.table{

    border-radius:15px;

    overflow:hidden;

    background:white;

}



.table thead{

    background:#0f172a;

    color:white;

}



.table td,

.table th{

    vertical-align:middle !important;

    padding:14px !important;

}



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

   FORMS

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



.form-control{

    border-radius:12px;

    border:1px solid #cbd5e1;

    padding:10px 14px;

    box-shadow:none !important;

}



.form-control:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 0.2rem rgba(37,99,235,0.15) !important;

}



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

   BUTTONS

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



.btn{

    border-radius:12px !important;

    padding:10px 18px !important;

    font-weight:600;

}



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

   CHARTS

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



canvas{

    width:100% !important;

}



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

   MOBILE

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



@media(max-width:768px){



.sidebar,

.report-panel{

    min-height:auto;

    margin-bottom:20px;

}



.navbar-brand-area{

    flex-direction:column;

    align-items:flex-start;

}



.nav-link-custom{

    margin-bottom:8px;

}



.logout-btn{

    margin-top:10px;

}



}







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

   FORM CONTROLS

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



input[type=text],

input[type=password],

input[type=date],

input[type=number],

input[type=email],

input[type=file],

select,

textarea{



    width:100%;

    border:1px solid #cbd5e1;

    border-radius:12px;

    padding:10px 14px;

    background:white;

    transition:0.3s;

    font-size:14px;

    box-shadow:none;

}



input:focus,

select:focus,

textarea:focus{



    border-color:#2563eb;

    outline:none;

    box-shadow:0 0 0 0.2rem rgba(37,99,235,0.15);



}



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

   BUTTONS

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



button,

.btn{



    border:none;

    border-radius:12px !important;

    padding:10px 18px !important;

    font-weight:600;

    transition:0.3s;

}



.btn-primary{

    background:#2563eb !important;

}



.btn-success{

    background:#059669 !important;

}



.btn-danger{

    background:#dc2626 !important;

}



.btn-dark{

    background:#111827 !important;

}



button:hover,

.btn:hover{



    transform:translateY(-1px);

    opacity:0.95;

}



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

   TABLES

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



table{



    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 3px 15px rgba(0,0,0,0.05);

}



table th{



    background:#0f172a;

    color:white;

    padding:14px;

    font-size:13px;

}



table td{



    padding:13px;

    border-bottom:1px solid #e2e8f0;

    font-size:13px;

}



table tr:hover{



    background:#f8fafc;

}



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

   LABELS

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



label{



    font-weight:600;

    margin-bottom:6px;

    color:#334155;

}



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

   PAGE TITLES

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



.page-title{



    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

    color:#0f172a;

}



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

   ALERTS

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



.alert{



    border-radius:14px;

    border:none;

    padding:14px 18px;

}