body {

    margin: 0;
    padding: 0;

    background: #071226;

    color: white;

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


/* LAYOUT */

.wrapper {

    display: flex;
}


/* SIDEBAR */

.sidebar {

    width: 260px;

    min-height: 100vh;

    background: #0b172d;

    padding: 24px;

    border-right:
        1px solid rgba(255,255,255,0.04);
}

.brand {

    font-size: 30px;

    font-weight: bold;

    margin-bottom: 40px;
}

.brand i {

    color: #60a5fa;
}

.menu {

    list-style: none;

    padding: 0;
}

.menu li {

    margin-bottom: 12px;
}

.menu a {

    text-decoration: none;

    color: #dbe7ff;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    border-radius: 14px;

    transition: 0.2s;
}

.menu a:hover {

    background: #12203d;
}


/* MAIN */

.main-content {

    flex: 1;

    padding: 30px;
}


/* TOPBAR */

.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}

.status-online {

    background: #0d3d2d;

    color: #4ade80;

    padding: 12px 18px;

    border-radius: 12px;

    font-weight: bold;

    border:
        1px solid rgba(74,222,128,0.18);
}


/* CARDS */

.stat-card {

    background: #0d1b33;

    border-radius: 22px;

    padding: 26px;

    display: flex;

    align-items: center;

    gap: 18px;

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

    height: 100%;

    border:
        1px solid rgba(255,255,255,0.04);
}

.stat-card h6 {

    color: #8ea6d9;

    margin-bottom: 8px;
}

.stat-card h2 {

    margin: 0;

    font-size: 42px;

    font-weight: bold;
}


/* ICONS */

.icon {

    width: 70px;

    height: 70px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;
}

.blue {

    background: rgba(59,130,246,0.18);

    color: #60a5fa;
}

.green {

    background: rgba(34,197,94,0.18);

    color: #4ade80;
}

.red {

    background: rgba(239,68,68,0.18);

    color: #f87171;
}

.purple {

    background: rgba(168,85,247,0.18);

    color: #c084fc;
}


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

.licenses-table {

    margin-top: 45px;

    background: #0d1b33;

    border-radius: 24px;

    padding: 28px;

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

    border:
        1px solid rgba(255,255,255,0.04);
}

.table-header h3 {

    font-size: 34px;

    margin-bottom: 24px;

    font-weight: bold;

    color: white;
}


/* TABLE */

.custom-table {

    width: 100%;

    border-collapse: collapse !important;

    overflow: hidden;

    border-radius: 18px;

    background: transparent !important;

    margin-bottom: 0 !important;
}


/* HEADER */

.custom-table thead {

    background: #12203d !important;
}

.custom-table thead tr {

    background: #12203d !important;
}

.custom-table thead th {

    background: #12203d !important;

    color: #7fa2ff !important;

    padding: 18px;

    font-size: 13px;

    text-transform: uppercase;

    border: none !important;

    letter-spacing: 1px;
}


/* BODY */

.custom-table tbody {

    background: transparent !important;
}

.custom-table tbody tr {

    background: #0f1d36 !important;

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

    transition: 0.2s;
}

.custom-table tbody tr:hover {

    background:
        rgba(79,140,255,0.08) !important;
}

.custom-table tbody td {

    padding: 20px 18px;

    color: #e2ebff !important;

    border: none !important;

    background: transparent !important;

    vertical-align: middle;
}


/* LICENSE */

.custom-table tbody td:first-child {

    font-family: monospace;

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.3px;
}


/* BADGES */

.badge-plan {

    background:
        rgba(59,130,246,0.16);

    color: #6ea8ff;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: bold;
}

.badge-active {

    background:
        rgba(34,197,94,0.16);

    color: #4ade80;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: bold;
}

.badge-expired {

    background:
        rgba(239,68,68,0.16);

    color: #f87171;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: bold;
}


/* RESPONSIVE */

.table-responsive {

    overflow-x: auto;
}