/* CSS Document */
/* =========================================================
   THEME FOR ADMINLTE
   ========================================================= */

:root{

    /* ===================================
       MAIN BRAND COLORS
    =================================== */

    --bot-primary: #d4a62a;          /* Premium Gold */
    --bot-primary-dark: #8c6510;     /* Dark Gold */
    --bot-secondary: #3fa9ff;        /* Electric Blue */
    --bot-accent: #5ec8ff;           /* Cyan Glow */
    --bot-success: #7ed957;          /* Success Green */
    --bot-brown: #34260a;            /* Deep Bronze */

    /* ===================================
       BACKGROUNDS
    =================================== */

    --bot-bg: #050811;               /* Main Background */
    --bot-bg2: #0b1220;              /* Secondary Background */

    --bot-card: #101827;             /* Card */
    --bot-card2: #151f31;            /* Elevated Card */

    --bot-sidebar: #070d18;
    --bot-navbar: #090f1c;

    /* ===================================
       TEXT
    =================================== */

    --bot-text: #ffffff;
    --bot-text-light: #c7d8ff;
    --bot-muted: #7f92b8;

    /* ===================================
       BORDER
    =================================== */

    --bot-border: rgba(212,166,42,.22);
    --bot-border-blue: rgba(63,169,255,.20);

    /* ===================================
       GLOW / SHADOW
    =================================== */

    --bot-shadow:
        0 0 18px rgba(212,166,42,.15);

    --bot-shadow-blue:
        0 0 20px rgba(63,169,255,.18);

    /* ===================================
       GRADIENTS
    =================================== */

    --bot-gradient-primary:
        linear-gradient(135deg,#d4a62a,#f4d36a);

    --bot-gradient-blue:
        linear-gradient(135deg,#0f6fff,#52c6ff);

    --bot-gradient-card:
        linear-gradient(180deg,#121c2e,#0d1422);

    --bot-gradient-sidebar:
        linear-gradient(180deg,#08101d,#050811);

    --bot-gradient-button:
        linear-gradient(90deg,#d4a62a,#f3cb55);

    --bot-gradient-active:
        linear-gradient(90deg,#0f6fff,#5ec8ff);

}

/* =========================================================
   BODY
   ========================================================= */

body{
    background: var(--bot-bg) !important;
    color: var(--bot-text) !important;
    font-family: 'Poppins', sans-serif;
}

.content-wrapper{
    background:
        radial-gradient(circle at top left,
        rgba(18,214,197,0.08),
        transparent 25%),

        radial-gradient(circle at bottom right,
        rgba(77,93,255,0.08),
        transparent 25%),

        var(--bot-bg2) !important;
}

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

.main-sidebar{
    background:var(--bot-gradient-sidebar) !important;
    border-right: 1px solid var(--bot-border);
}

.brand-link{
    border-bottom: 1px solid var(--bot-border) !important;
    background: rgba(18,214,197,0.05);
}

.brand-text{
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link{
    color: var(--bot-text-light);
    border-radius: 10px;
    /*margin: 4px 10px;*/
    transition: 0.3s;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover{
    background:
        linear-gradient(90deg, rgb(224 196 17 / 20%), rgb(255 228 53 / 15%)) !important;

    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-brown)
        ) !important;

    color: #fff !important;

    box-shadow: var(--bot-shadow);
}

/* =========================================================
   NAVBAR
   ========================================================= */

.main-header{
    background: #0d1220 !important;
    border-bottom: 1px solid var(--bot-border) !important;
}

.main-header .nav-link{
    color: var(--bot-text-light) !important;
}

.main-header .nav-link:hover{
    color: #fff !important;
}

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

.card{
    background: linear-gradient(
        180deg,
        var(--bot-card),
        var(--bot-card2)
    ) !important;

    border: 1px solid var(--bot-border) !important;

    border-radius: 5px !important;

    box-shadow: var(--bot-shadow);

    overflow: hidden;
}

.card-header{
    background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid var(--bot-border) !important;
}

.card-header .img-fluid{
    height: 100px;
    width: auto;
}

.card-title{
    color: #fff;
    font-weight: 600;
}

.card-body{
    color: var(--bot-text-light);
}
.card.bg-info{
    background: linear-gradient(
        180deg,
        #17a2b8,
        var(--bot-card)
    ) !important;
}
.card.bg-success{
    background: linear-gradient(
        180deg,
        #28a745,
        var(--bot-card)
    ) !important;
}
.card.bg-primary{
    background: linear-gradient(
        180deg,
        var(--bot-primary),
        var(--bot-card)
    ) !important;
}

.card.bg-danger{
    background: linear-gradient(
        180deg,
        #dc3545,
        var(--bot-card)
    ) !important;
}

/* =========================================================
   SMALL BOXES / DASHBOARD CARDS
   ========================================================= */

.small-box{
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid var(--bot-border);

    background:
        linear-gradient(
            135deg,
            rgba(18,214,197,0.15),
            rgba(77,93,255,0.15)
        ) !important;

    box-shadow: var(--bot-shadow);
}

.small-box h3,
.small-box p{
    color: #fff !important;
}

.small-box .icon{
    color: rgba(255,255,255,0.15) !important;
}
.small-box.bg-info{
    background: linear-gradient(
        180deg,
        #17a2b8,
        var(--bot-card)
    ) !important;
}
.small-box.bg-success{
    background: linear-gradient(
        180deg,
        #28a745,
        var(--bot-card)
    ) !important;
}
.small-box.bg-primary{
    background: linear-gradient(
        180deg,
        var(--bot-primary),
        var(--bot-card)
    ) !important;
}

.small-box.bg-danger{
    background: linear-gradient(
        180deg,
        #dc3545,
        var(--bot-card)
    ) !important;
}

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

.btn-primary{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-brown)
        ) !important;

    border: none !important;

    color: #fff !important;

    border-radius: 10px;

    box-shadow: 0 0 12px rgba(18,214,197,0.3);
}

.btn-primary:hover{
    transform: translateY(-1px);

    box-shadow:
        0 0 18px rgba(18,214,197,0.45);
}

.btn-success{
    background:
        linear-gradient(
            90deg,
            #19d37e,
            #6eff8d
        ) !important;

    border: none !important;
}

.btn-danger{
    background:
        linear-gradient(
            90deg,
            #ff4b6e,
            #ff6b81
        ) !important;

    border: none !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table{
    color: var(--bot-text-light);
}

.table thead th{
    border-bottom: 1px solid var(--bot-border) !important;
    color: #fff;
    background: rgba(255,255,255,0.03);
}

.table td{
    border-color: rgba(255,255,255,0.05) !important;
}

.table-hover tbody tr:hover{
    background: rgba(18,214,197,0.05) !important;
}

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

.form-control{
    background: #0f1424 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-radius: 10px;
}

.form-control:focus{
    border-color: var(--bot-primary) !important;

    box-shadow:
        0 0 0 0.15rem rgba(18,214,197,0.15) !important;
}

.input-group-text{
    background: #13192c !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu{
    background: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    border-radius: 5px !important;
}

.dropdown-item{
    color: var(--bot-text-light) !important;
}

.dropdown-item:hover{
    background:
        rgba(18,214,197,0.1) !important;

    color: #fff !important;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-content{
    background: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    border-radius: 18px !important;
}

.modal-header{
    border-bottom: 1px solid var(--bot-border) !important;
}

.modal-footer{
    border-top: 1px solid var(--bot-border) !important;
}

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

.badge-primary{
    background: var(--bot-primary) !important;
}

.badge-success{
    background: #19d37e !important;
}

.badge-danger{
    background: #ff4b6e !important;
}

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

.page-link{
    background: #121827 !important;
    border: 1px solid var(--bot-border) !important;
    color: var(--bot-text-light) !important;
}

.page-item.active .page-link{
    background:
        linear-gradient(
            90deg,
            var(--bot-primary),
            var(--bot-brown)
        ) !important;

    border: none !important;
}

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

::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track{
    background: #0b0f1c;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            var(--bot-primary),
            var(--bot-brown)
        );

    border-radius: 20px;
}

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

.login-page,
.register-page{
    
}

.login-box .card,
.register-box .card{
    backdrop-filter: blur(10px);
}

/* =========================================================
   CHART BOXES
   ========================================================= */

.chart-container,
.chart-box{
    background:
        linear-gradient(
            180deg,
            #141b2f,
            #101522
        );

    border-radius: 16px;
    padding: 15px;
    border: 1px solid var(--bot-border);
}

/* =========================================================
   CUSTOM GLOW EFFECTS
   ========================================================= */

.glow-primary{
    box-shadow:
        0 0 20px rgba(18,214,197,0.35);
}

.glow-blue{
    box-shadow:
        0 0 20px rgba(77,93,255,0.35);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

.card,
.small-box,
.btn{
    transition: all 0.25s ease;
}

.small-box:hover{
    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(18,214,197,0.25);
}