/* ==========================================================
   Mining Management System
   Main Stylesheet
   Bootstrap 5.3 Compatible
========================================================== */

:root{

    --primary:#0d6efd;
    --secondary:#6c757d;
    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --sidebar:#1f2937;
    --sidebar-hover:#374151;
    --sidebar-active:#2563eb;

    --topbar:#ffffff;
    --body:#f5f7fb;
    --card:#ffffff;

    --text:#222;
    --text-light:#666;

    --border:#e5e7eb;

    --radius:12px;

    --transition:.25s;
}

html,
body{

    height:100%;
}

body{

    background:var(--body);

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

    color:var(--text);

    overflow-x:hidden;
}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    background:var(--sidebar);

    color:#fff;

    overflow-y:auto;

    transition:var(--transition);

    z-index:1050;
}

.sidebar-header{

    padding:22px;

    text-align:center;

    font-size:22px;

    font-weight:700;

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

.sidebar-header small{

    display:block;

    font-size:12px;

    color:#b5b5b5;

    margin-top:4px;
}

.sidebar nav,
.sidebar-nav {
    display: block;
    width: 100%;
}

.sidebar ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 15px 0;
}

.sidebar-section {
    padding: 16px 22px 6px 22px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar li{

    margin:2px 0;
}

.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 22px;

    color:#ddd;

    text-decoration:none;

    transition:var(--transition);

    font-size:15px;
}

.sidebar a:hover{

    background:var(--sidebar-hover);

    color:#fff;
}

.sidebar a.active{

    background:var(--sidebar-active);

    color:#fff;

    border-left:5px solid #fff;
}

/* ==========================================================
   Top Bar
========================================================== */

.topbar{

    margin-left:260px;

    height:65px;

    background:var(--topbar);

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    position:sticky;

    top:0;

    z-index:1000;
}

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

.content{

    margin-left:260px;

    padding:30px;
}

/* ==========================================================
   Cards
========================================================== */

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:

        0 2px 10px rgba(0,0,0,.05);

    transition:.25s;
}

.card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 10px 25px rgba(0,0,0,.08);
}

.card-header{

    background:#fff;

    font-weight:600;

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

/* ==========================================================
   Buttons
========================================================== */

.btn{

    border-radius:10px;

    padding:.55rem 1rem;

    font-weight:600;
}

/* ==========================================================
   Tables
========================================================== */

.table{

    background:#fff;
}

.table thead{

    background:#f2f4f7;
}

/* ==========================================================
   Forms
========================================================== */

.form-control,
.form-select{

    border-radius:10px;

    min-height:44px;
}

.form-control:focus{

    box-shadow:none;

    border-color:var(--primary);
}

/* ==========================================================
   Dashboard Widgets
========================================================== */

.widget{

    background:#fff;

    border-radius:12px;

    padding:22px;

    box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.widget h2{

    margin:0;

    font-size:34px;
}

.widget p{

    margin-top:10px;

    color:var(--text-light);
}

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

.footer{

    margin-left:260px;

    text-align:center;

    padding:18px;

    color:#777;

    font-size:14px;
}

/* ==========================================================
   RTL Support
========================================================== */

html[dir="rtl"] .sidebar{

    right:0;

    left:auto;
}

html[dir="rtl"] .topbar{

    margin-right:260px;

    margin-left:0;
}

html[dir="rtl"] .content{

    margin-right:260px;

    margin-left:0;
}

html[dir="rtl"] .footer{

    margin-right:260px;

    margin-left:0;
}

html[dir="rtl"] .sidebar a.active{

    border-left:none;

    border-right:5px solid #fff;
}

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

@media(max-width:992px){

.sidebar{

    margin-left:-260px;
}

.sidebar.show{

    margin-left:0;
}

.topbar{

    margin-left:0;
}

.content{

    margin-left:0;
}

.footer{

    margin-left:0;
}

html[dir="rtl"] .sidebar{

    margin-right:-260px;
}

html[dir="rtl"] .sidebar.show{

    margin-right:0;
}

html[dir="rtl"] .topbar{

    margin-right:0;
}

html[dir="rtl"] .content{

    margin-right:0;
}

html[dir="rtl"] .footer{

    margin-right:0;
}

}
/* ==========================================================
   Sidebar Mobile Backdrop
========================================================== */

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .sidebar-backdrop.show {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}