/* =========================================================
   STAPLE SPECTRUM - PROFESSIONAL BILLING SOFTWARE THEME
   For MINIA Admin Template
   Compact + Professional + Stable UI
   ========================================================= */

:root{

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

    --primary:#1f4fa3;
    --primary-light:#3d74d6;
    --primary-dark:#123574;

    --cyan:#00a8c6;
    --green:#53c653;
    --yellow:#f5c542;
    --orange:#ff8c1a;
    --red:#ff4d4d;
    --pink:#d63384;
    --purple:#7b2cbf;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;
    --info:#06b6d4;

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

    --text:#243b53;
    --text-light:#667085;

    --border:#e7edf5;

    --shadow-sm:0 1px 3px rgba(15,23,42,.04);
    --shadow-md:0 4px 12px rgba(15,23,42,.06);
    --shadow-lg:0 10px 24px rgba(15,23,42,.08);

    --radius-sm:4px;
    --radius:6px;
    --radius-md:8px;

    --transition:all .2s ease;
}

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

body{
    background:var(--body-bg)!important;
    font-size:13px;
    color:var(--text);
    font-family:'Inter',sans-serif;
}

.page-content{
    background:
    radial-gradient(circle at top right,
    rgba(123,44,191,.03),
    transparent 22%),

    radial-gradient(circle at bottom left,
    rgba(0,168,198,.03),
    transparent 22%),

    var(--body-bg);
}

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

.vertical-menu{
    background:#fff!important;
    border-right:1px solid var(--border);
    box-shadow:var(--shadow-md);
    margin-top: -5px;
}

.navbar-brand-box{
    height:64px!important;
    background:#fff!important;
    border-bottom:1px solid var(--border);
}

/* menu title */

.menu-title{
    color:#98a2b3!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* menu item */

#sidebar-menu ul li a{
    padding:.68rem 1rem!important;
    margin:3px 10px;
    border-radius:var(--radius);
    color:#475467!important;
    font-size:13px!important;
    font-weight:600!important;
    transition:var(--transition);
}

/* icons */

#sidebar-menu ul li a i{
    color:var(--primary)!important;
    font-size:17px!important;
}

/* hover */

#sidebar-menu ul li a:hover{
    background:
    linear-gradient(
        90deg,
        rgba(31,79,163,.08),
        rgba(123,44,191,.04)
    )!important;

    color:var(--primary)!important;
}

/* active */

#sidebar-menu ul li.mm-active > a{
    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--purple)
    )!important;

    color:#fff!important;

    box-shadow:
    0 6px 16px rgba(31,79,163,.16);
}

#sidebar-menu ul li.mm-active > a i{
    color:#fff!important;
}

/* =========================================================
   TOPBAR
   ========================================================= */

#page-topbar{
    height:64px!important;

    background:#fff!important;

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

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

/* top buttons */

.header-item{

    border-radius:var(--radius)!important;

    transition:var(--transition);
}

.header-item:hover{
    background:
    linear-gradient(
        135deg,
        rgba(31,79,163,.08),
        rgba(123,44,191,.05)
    )!important;
}

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

.card{
    border:none!important;

    border-radius:var(--radius-md)!important;

    background:var(--card-bg)!important;

    box-shadow:var(--shadow-sm)!important;

    transition:box-shadow .2s ease;

    overflow:hidden;

    position:relative;

    transform:none!important;

    will-change:auto!important;

    backface-visibility:hidden;
}

/* rainbow top border */

.card::before{
    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        #1f4fa3,
        #00a8c6,
        #53c653,
        #f5c542,
        #ff8c1a,
        #ff4d4d,
        #d63384,
        #7b2cbf
    );

    opacity:0;

    transition:opacity .2s ease;
}

.card:hover{
    box-shadow:var(--shadow-md)!important;
}

.card:hover::before{
    opacity:1;
}

/* compact body */

.card-body{
    padding:1rem!important;
}

/* titles */

.card-title{
    font-size:14px!important;
    font-weight:700!important;
    color:#101828!important;
}

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

.mini-stats-wid h4{
    font-size:22px!important;
    font-weight:700!important;
    color:var(--primary)!important;
}

.mini-stats-wid p{
    font-size:12px!important;
    color:var(--text-light)!important;
}

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

.btn{
    border-radius:var(--radius-sm)!important;

    font-size:12px!important;

    font-weight:600!important;

    padding:.42rem .82rem!important;

    line-height:1.2!important;

    transition:background .2s ease,
               border-color .2s ease,
               color .2s ease!important;

    box-shadow:none!important;

    transform:none!important;

    backface-visibility:hidden;
}

/* small */

.btn-sm{
    padding:.3rem .65rem!important;
    font-size:11px!important;
}

/* primary */

.btn-primary{
    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--purple)
    )!important;

    border:none!important;
}

.btn-primary:hover{
    opacity:.95;
}

/* success */

.btn-success{
    background:
    linear-gradient(
        135deg,
        var(--green),
        var(--cyan)
    )!important;

    border:none!important;
}

/* danger */

.btn-danger{
    background:
    linear-gradient(
        135deg,
        var(--red),
        var(--pink)
    )!important;

    border:none!important;
}

/* outline */

.btn-outline-primary{
    border:1px solid #d0d5dd!important;

    color:#475467!important;

    background:#fff!important;
}

.btn-outline-primary:hover{
    background:#f4f7fb!important;
    color:var(--primary)!important;
}

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

.table{
    margin-bottom:0!important;
}

.table thead th{
    background:#f8fafc!important;

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

    color:#667085!important;

    font-size:11px!important;

    font-weight:700!important;

    text-transform:uppercase;

    padding:11px 14px!important;
}

.table tbody td{
    padding:12px 14px!important;

    border-bottom:1px solid #f2f4f7!important;

    vertical-align:middle!important;

    font-size:13px!important;
}

.table tbody tr{
    transition:background .2s ease;
}

.table tbody tr:hover{
    background:#fafcff!important;
}

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

.form-control,
.form-select{
    height:36px!important;

    border-radius:var(--radius)!important;

    border:1px solid #d0d5dd!important;

    font-size:13px!important;

    padding:.45rem .8rem!important;

    box-shadow:none!important;

    transition:border-color .2s ease,
               box-shadow .2s ease;
}

textarea.form-control{
    height:auto!important;
}

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

    box-shadow:
    0 0 0 3px rgba(31,79,163,.08)!important;
}

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

.badge{
    border-radius:4px!important;

    padding:.35rem .55rem!important;

    font-size:11px!important;

    font-weight:600!important;
}

/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown-menu{
    border:none!important;

    border-radius:var(--radius-md)!important;

    box-shadow:var(--shadow-lg)!important;

    padding:.35rem!important;

    transform:none!important;

    backface-visibility:hidden;
}

.dropdown-item{
    border-radius:var(--radius)!important;

    font-size:13px!important;

    padding:.52rem .8rem!important;

    transition:background .2s ease;
}

.dropdown-item:hover{
    background:
    linear-gradient(
        90deg,
        rgba(31,79,163,.08),
        rgba(123,44,191,.04)
    )!important;

    color:var(--primary)!important;
}

/* =========================================================
   TABS
   ========================================================= */

.nav-tabs{
    gap:6px!important;

    border:none!important;
}

.nav-tabs .nav-link{
    border:none!important;

    border-radius:var(--radius)!important;

    background:#fff!important;

    padding:.45rem .9rem!important;

    font-size:12px!important;

    font-weight:600!important;

    color:#667085!important;
}

.nav-tabs .nav-link.active{
    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--purple)
    )!important;

    color:#fff!important;
}

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

.modal,
.modal-dialog,
.modal-content{
    transform:none!important;

    backface-visibility:hidden;

    will-change:auto!important;
}

.modal.fade .modal-dialog{
    transition:transform .18s ease-out!important;
    transform:translate(0,-8px)!important;
}

.modal.show .modal-dialog{
    transform:none!important;
}

.modal-content{
    border:none!important;

    border-radius:var(--radius-md)!important;

    overflow:hidden;
}

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

    padding:.9rem 1rem!important;
}

.modal-body{
    padding:1rem!important;
}

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

    padding:.8rem 1rem!important;
}

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

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

::-webkit-scrollbar-track{
    background:#f1f5f9;
}

::-webkit-scrollbar-thumb{
    background:
    linear-gradient(
        to bottom,
        var(--cyan),
        var(--purple)
    );

    border-radius:20px;
}

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

.auth-full-page-content{
    background:
    linear-gradient(
        135deg,
        #1f4fa3,
        #00a8c6,
        #7b2cbf
    );
}

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

@media(max-width:768px){

    .vertical-menu{
        box-shadow:none!important;
    }

}