/* ===========================================================
   EVERMAN DAIRY ERP
   APP.CSS
   PART 1
   Layout + Sidebar + Navbar
=========================================================== */

:root{

    --primary:#198754;
    --primary-dark:#146c43;

    --secondary:#6c757d;

    --light:#f4f6f9;
    --white:#ffffff;

    --border:#e9ecef;

    --text:#212529;
    --muted:#6c757d;

    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --sidebar-width:270px;

    --navbar-height:70px;

    --radius:14px;

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

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--light);

    font-family:

        Inter,

        "Segoe UI",

        sans-serif;

    color:var(--text);

    overflow-x:hidden;

}

/* =======================================
Sidebar
======================================= */

.sidebar{

    position:fixed;

    left:0;

    top:0;

    width:var(--sidebar-width);

    height:100vh;

    background:var(--primary);

    color:#fff;

    overflow-y:auto;

    transition:.3s;

    z-index:1050;

    box-shadow:var(--shadow);

}

.sidebar-header{

    padding:25px;

    display:flex;

    align-items:center;

    gap:15px;

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

}

.logo{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    font-weight:bold;

}

.sidebar-header h5{

    font-weight:700;

}

.sidebar-header small{

    opacity:.8;

}

.sidebar-menu{

    padding:20px 12px;

}

.menu-title{

    display:block;

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    opacity:.65;

    margin:

        22px

        15px

        10px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    margin-bottom:5px;

    transition:.25s;

}

.sidebar-menu a:hover{

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

    transform:translateX(4px);

}

.sidebar-menu a.active{

    background:#fff;

    color:var(--primary);

    font-weight:600;

}

.sidebar-menu i{

    font-size:20px;

    width:25px;

    text-align:center;

}

/* =======================================
Main Area
======================================= */

.main-content{

    margin-left:var(--sidebar-width);

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* =======================================
Navbar
======================================= */

.top-navbar{

    position:sticky;

    top:0;

    height:var(--navbar-height);

    background:#fff;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    z-index:1040;

}

.left-section{

    display:flex;

    align-items:center;

    gap:15px;

}

.page-title{

    font-size:24px;

    font-weight:700;

}

.menu-toggle{

    display:none;

    border:none;

    background:none;

    font-size:30px;

    color:var(--primary);

}

.right-section{

    display:flex;

    align-items:center;

    gap:15px;

}

.search-box{

    display:flex;

    align-items:center;

    background:#f7f7f7;

    border-radius:12px;

    padding:10px 15px;

    gap:10px;

}

.search-box input{

    border:none;

    outline:none;

    background:none;

    width:220px;

}

.icon-btn{

    width:45px;

    height:45px;

    border:none;

    background:#f7f7f7;

    border-radius:50%;

    position:relative;

    transition:.3s;

}

.icon-btn:hover{

    background:#ececec;

}

.icon-btn i{

    font-size:20px;

}

.icon-btn .badge{

    position:absolute;

    top:-3px;

    right:-3px;

    font-size:10px;

}

.profile-btn{

    border-radius:50px;

}

/* =======================================
Page Content
======================================= */

.page-content{

    flex:1;

    padding:30px;

}

/* =======================================
Footer
======================================= */

.footer{

    background:#fff;

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

    padding:18px 30px;

    font-size:14px;

}

.footer a{

    color:var(--primary);

    text-decoration:none;

}

.footer a:hover{

    color:var(--primary-dark);

}

/* =======================================
Scrollbar
======================================= */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#bfbfbf;

    border-radius:20px;

}

/* =======================================
Mobile
======================================= */

@media(max-width:992px){

    .sidebar{

        left:-100%;

    }

    .sidebar.show{

        left:0;

    }

    .main-content{

        margin-left:0;

    }

    .menu-toggle{

        display:block;

    }

    .top-navbar{

        padding:0 15px;

    }

    .search-box{

        display:none;

    }

    .page-content{

        padding:20px;

    }

}

@media(max-width:576px){

    .page-title{

        font-size:18px;

    }

    .icon-btn{

        width:40px;

        height:40px;

    }

    .footer{

        text-align:center;

        font-size:13px;

    }

}

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

.dashboard-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:30px;

}

.dashboard-card{

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

    transition:.3s;

}

.dashboard-card:hover{

    transform:translateY(-6px);

}

.dashboard-card::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:8px;

    height:100%;

    background:var(--primary);

}

.dashboard-card h6{

    color:var(--muted);

    margin-bottom:10px;

    font-weight:600;

}

.dashboard-card h2{

    font-size:34px;

    font-weight:700;

}

.dashboard-card small{

    color:var(--muted);

}

.dashboard-icon{

    position:absolute;

    right:25px;

    top:25px;

    font-size:42px;

    opacity:.12;

}

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

.card{

    border:none;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.card-header{

    background:#fff;

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

    font-weight:700;

    padding:18px 22px;

}

.card-body{

    padding:22px;

}

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

.btn{

    border-radius:10px;

    font-weight:600;

}

.btn-success{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-success:hover{

    background:var(--primary-dark);

}

.btn-outline-success{

    color:var(--primary);

    border-color:var(--primary);

}

.btn-outline-success:hover{

    background:var(--primary);

}

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

.table{

    vertical-align:middle;

}

.table thead{

    background:#f7f7f7;

}

.table th{

    border:none;

    font-weight:700;

    color:#444;

}

.table td{

    border-color:#ececec;

}

.table-hover tbody tr:hover{

    background:#f7fff8;

}

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

.badge-success{

    background:#198754;

    color:#fff;

}

.badge-danger{

    background:#dc3545;

    color:#fff;

}

.badge-warning{

    background:#ffc107;

    color:#000;

}

.badge-info{

    background:#0dcaf0;

    color:#fff;

}

/* ===========================================================
   QUICK ACTIONS
=========================================================== */

.quick-actions{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}

.quick-btn{

    background:#fff;

    padding:22px;

    border-radius:16px;

    text-align:center;

    box-shadow:var(--shadow);

    text-decoration:none;

    color:#333;

    transition:.3s;

}

.quick-btn:hover{

    transform:translateY(-5px);

    color:var(--primary);

}

.quick-btn i{

    font-size:34px;

    margin-bottom:12px;

}

/* ===========================================================
   CHART CARD
=========================================================== */

.chart-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

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

.form-control,

.form-select{

    border-radius:10px;

    padding:12px;

    border:1px solid #ddd;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

    box-shadow:none;

}

label{

    font-weight:600;

    margin-bottom:8px;

}

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

.alert{

    border:none;

    border-radius:12px;

}

/* ===========================================================
   PAGINATION
=========================================================== */

.pagination{

    justify-content:end;

}

.page-link{

    border:none;

    margin:0 3px;

    border-radius:8px;

    color:var(--primary);

}

.page-item.active .page-link{

    background:var(--primary);

    border-color:var(--primary);

}

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

@media(max-width:768px){

.dashboard-grid{

grid-template-columns:1fr;

}

.quick-actions{

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

}

.card-body{

padding:18px;

}

.dashboard-card h2{

font-size:28px;

}

.table{

font-size:14px;

}

}

/* ===========================================================
   EVERMAN DAIRY ERP
   PART 3
   Animations + Widgets + Utilities + Dark Mode Ready
=========================================================== */

/* ==========================
   Animation
========================== */

.fade-in{

    animation:fadeIn .4s ease;

}

.slide-up{

    animation:slideUp .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   Hover Effects
========================== */

.hover-lift{

    transition:.3s;

}

.hover-lift:hover{

    transform:translateY(-6px);

}

/* ==========================
   Statistics
========================== */

.stat-number{

    font-size:36px;

    font-weight:700;

    color:var(--primary);

}

.stat-label{

    color:var(--muted);

    font-size:14px;

}

/* ==========================
   Progress
========================== */

.progress{

    height:10px;

    border-radius:20px;

    background:#edf0f2;

}

.progress-bar{

    background:var(--primary);

}

/* ==========================
   Timeline
========================== */

.timeline{

    position:relative;

    padding-left:30px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:2px;

    background:#dcdcdc;

}

.timeline-item{

    position:relative;

    margin-bottom:25px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-24px;

    top:4px;

    width:12px;

    height:12px;

    background:var(--primary);

    border-radius:50%;

}

/* ==========================
   Widget
========================== */

.widget{

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

/* ==========================
   Notification
========================== */

.notification{

    display:flex;

    gap:15px;

    padding:14px;

    border-bottom:1px solid #eee;

}

.notification:last-child{

    border-bottom:none;

}

.notification-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#e9f8ef;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

}

/* ==========================
   Empty State
========================== */

.empty-state{

    text-align:center;

    padding:60px 20px;

}

.empty-state i{

    font-size:70px;

    color:#c9c9c9;

    margin-bottom:20px;

}

/* ==========================
   Loader
========================== */

.loader{

    width:45px;

    height:45px;

    border:4px solid #ddd;

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

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

/* ==========================
   Utility Classes
========================== */

.shadow-soft{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:20px;

}

.bg-primary-soft{

    background:#e9f8ef;

}

.text-primary{

    color:var(--primary)!important;

}

.cursor-pointer{

    cursor:pointer;

}

/* ==========================
   Mobile Bottom Space
========================== */

@media(max-width:768px){

.page-content{

padding-bottom:90px;

}

}

/* ==========================
   Dark Mode Ready
========================== */

body.dark{

    background:#111827;

    color:#f1f5f9;

}

body.dark .card,

body.dark .widget,

body.dark .chart-card,

body.dark .top-navbar,

body.dark .footer{

    background:#1f2937;

    color:#fff;

}

body.dark .sidebar{

    background:#111827;

}

body.dark .sidebar-menu a.active{

    background:#198754;

    color:#fff;

}

body.dark .form-control,

body.dark .form-select{

    background:#374151;

    border-color:#4b5563;

    color:#fff;

}

body.dark .table{

    color:#fff;

}

body.dark .table thead{

    background:#273548;

}

body.dark .table-hover tbody tr:hover{

    background:#26384c;

}