* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    font-family:
    Inter,
    Arial,
    sans-serif;

    background:
    radial-gradient(
        circle at top left,
        #064e3b 0%,
        #020617 45%
    );

    color:white;

}


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


.login-page {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

}



.login-card {

    width:420px;

    padding:45px;

    background:
    rgba(15,23,42,.85);

    border:
    1px solid rgba(34,197,94,.25);

    backdrop-filter:blur(20px);

    border-radius:24px;

    box-shadow:
    0 0 50px rgba(34,197,94,.15);

}



.logo {

    text-align:center;

    font-size:34px;

    font-weight:900;

    color:#22c55e;

    text-shadow:
    0 0 25px rgba(34,197,94,.7);

}



input {

    width:100%;

    padding:15px;

    margin-bottom:18px;

    background:#020617;

    border:1px solid #1e293b;

    border-radius:12px;

    color:white;

    outline:none;

}


input:focus {

    border-color:#22c55e;

    box-shadow:
    0 0 15px rgba(34,197,94,.3);

}




button {

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:white;

    font-weight:800;

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    box-shadow:
    0 0 25px rgba(34,197,94,.35);

}


button:hover {

    transform:translateY(-2px);

}




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


.sidebar {

    position:fixed;

    left:0;

    top:0;

    bottom:0;

    width:260px;

    padding:30px;

    background:
    rgba(2,6,23,.95);

    border-right:
    1px solid rgba(34,197,94,.15);

}



.brand {

    font-size:25px;

    font-weight:900;

    color:#22c55e;

    margin-bottom:40px;

}



.brand span {

    display:block;

    font-size:12px;

    color:#94a3b8;

    margin-top:5px;

}



.sidebar a {

    display:block;

    padding:14px;

    margin-bottom:10px;

    border-radius:12px;

    color:#cbd5e1;

    text-decoration:none;

}



.sidebar a:hover,

.sidebar .active {

    background:

    rgba(34,197,94,.15);

    color:white;

}



.sidebar-bottom {

    position:absolute;

    bottom:30px;

}




/* =========================
 MAIN
========================= */


.main {

    margin-left:260px;

    padding:40px;

}



.topbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}



.topbar h1 {

    margin:0;

    font-size:38px;

}



.topbar p {

    color:#94a3b8;

}



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


.cards {

    display:grid;

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

    gap:25px;

}



.card {

    background:

    rgba(15,23,42,.85);

    border:

    1px solid rgba(34,197,94,.15);

    border-radius:22px;

    padding:30px;

}



.card h3 {

    color:#94a3b8;

    margin:0;

}



.number {

    margin-top:15px;

    font-size:42px;

    font-weight:900;

    color:#22c55e;

}




/* =========================
 PANELS
========================= */


.panel {

    background:

    rgba(15,23,42,.85);

    border:

    1px solid rgba(34,197,94,.15);

    border-radius:22px;

    padding:30px;

}



.dashboard-grid {

    display:grid;

    grid-template-columns:
    2fr 1fr;

    gap:25px;

    margin-top:30px;

}




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


.table-panel {

    overflow:hidden;

}


.table-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.table-wrapper {

    width:100%;

    overflow-x:auto;

}



.saas-table {

    width:100%;

    border-collapse:collapse;

    background:#020617;

    border-radius:15px;

    overflow:hidden;

}



.saas-table thead {

    background:

    rgba(34,197,94,.12);

}



.saas-table th {

    padding:18px;

    text-align:left;

    color:#22c55e;

    font-size:14px;

    border-bottom:

    1px solid rgba(255,255,255,.1);

}



.saas-table td {

    padding:18px;

    color:#e2e8f0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

    vertical-align:middle;

}



.saas-table tbody tr:hover {

    background:

    rgba(34,197,94,.08);

}



.license-code {

    color:#22c55e;

    font-weight:900;

    font-size:14px;

    white-space:nowrap;

}



.customer-name {

    font-weight:700;

}



.customer-email {

    color:#94a3b8;

    font-size:13px;

}



.status-active {

    display:inline-block;

    background:

    rgba(34,197,94,.15);

    color:#22c55e;

    padding:7px 14px;

    border-radius:20px;

    font-size:12px;

}



.badge {

    display:inline-block;

    background:

    rgba(148,163,184,.15);

    color:#cbd5e1;

    padding:7px 14px;

    border-radius:20px;

    font-size:12px;

}



.device-count {

    font-weight:700;

}



.small-btn {

    width:auto;

    padding:9px 18px;

    font-size:13px;

}


.empty {

    text-align:center;

    padding:40px;

    color:#94a3b8;

}




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


@media(max-width:900px){


.sidebar {

    position:relative;

    width:100%;

    height:auto;

}



.main {

    margin-left:0;

    padding:20px;

}



.dashboard-grid {

    grid-template-columns:1fr;

}



.topbar {

    flex-direction:column;

    gap:20px;

}


}