/* ==========================================================
   MOTO INNOVATIONS
   ADMIN PANEL
   PREMIUM NEON UI
   RED + OCEAN BLUE + BLACK + WHITE
========================================================== */


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    --black: #030506;
    --black-2: #070a0d;
    --black-3: #0b1015;

    --panel: #0d1319;
    --panel-2: #111820;
    --panel-3: #151e27;

    --red: #ff1744;
    --red-bright: #ff003c;
    --red-dark: #a8002a;

    --blue: #00bfff;
    --blue-bright: #00e5ff;
    --blue-dark: #0077a8;

    --white: #ffffff;
    --white-soft: #e8eef2;

    --text: #dce5ea;
    --muted: #7d8b95;
    --muted-2: #53616b;

    --border: rgba(255, 255, 255, 0.08);
    --border-red: rgba(255, 23, 68, 0.35);
    --border-blue: rgba(0, 191, 255, 0.30);

    --shadow:
        0 15px 45px rgba(0, 0, 0, 0.45);

    --red-glow:
        0 0 20px rgba(255, 23, 68, 0.25);

    --blue-glow:
        0 0 20px rgba(0, 191, 255, 0.22);

}


/* ==========================================================
   RESET
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {

    width: 100%;
    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: var(--black);

    color: var(--text);

    overflow-x: hidden;

}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}


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

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

::-webkit-scrollbar-track {
    background: var(--black-2);
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(180deg,
            var(--red),
            var(--blue));

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blue-bright);
}


/* ==========================================================
   GLOBAL BACKGROUND EFFECT
========================================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background:

        radial-gradient(circle at 10% 10%,
            rgba(255, 23, 68, 0.08),
            transparent 28%),

        radial-gradient(circle at 90% 20%,
            rgba(0, 191, 255, 0.07),
            transparent 30%);

}


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

.login-page {

    min-height: 100vh;

    background:
        linear-gradient(135deg,
            #020304 0%,
            #060b10 50%,
            #020304 100%);

}

.login-bg {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    position: relative;

    overflow: hidden;

}


/* RED GLOW */

.login-bg::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -200px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255, 23, 68, 0.10);

    filter: blur(110px);

}


/* BLUE GLOW */

.login-bg::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background:
        rgba(0, 191, 255, 0.10);

    filter: blur(110px);

}


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

.login-card {

    width: 100%;
    max-width: 440px;

    position: relative;

    z-index: 2;

    padding: 42px;

    background:
        linear-gradient(145deg,
            rgba(18, 25, 32, 0.96),
            rgba(5, 8, 11, 0.98));

    border:

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

    border-radius: 22px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.70),
        0 0 45px rgba(0, 191, 255, 0.05);

    backdrop-filter: blur(20px);

    overflow: hidden;

}


/* TOP NEON LINE */

.login-card::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--red),
            var(--blue),
            var(--red));

    box-shadow:
        0 0 15px var(--red),
        0 0 25px var(--blue);

}


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

.login-logo {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 18px;

}

.login-logo img {

    width: 275px;

    display: block;

    filter:
        drop-shadow(0 0 14px rgba(255, 23, 68, 0.20));

}


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

.login-title {

    text-align: center;

    margin-bottom: 30px;

}

.login-title span {

    display: inline-block;

    color: var(--blue-bright);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;

    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.5);

}

.login-title h1 {

    margin-top: 9px;

    color: var(--white);

    font-size: 27px;

    font-weight: 800;

}

.login-title p {

    margin-top: 8px;

    color: var(--muted);

    font-size: 13px;

}


/* ==========================================================
   ERROR
========================================================== */

.login-error {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 15px;

    margin-bottom: 20px;

    border:

        1px solid var(--border-red);

    border-radius: 10px;

    background:
        rgba(255, 23, 68, 0.08);

    color: #ff6b88;

    font-size: 12px;

    box-shadow:
        inset 0 0 15px rgba(255, 23, 68, 0.03);

}


/* ==========================================================
   FORM
========================================================== */

.login-field {

    margin-bottom: 21px;

}

.login-field label {

    display: block;

    margin-bottom: 8px;

    color: var(--white-soft);

    font-size: 12px;

    font-weight: 700;

}

.login-input {

    position: relative;

    display: flex;

    align-items: center;

}

.login-input>i {

    position: absolute;

    left: 15px;

    color: var(--muted);

    font-size: 16px;

    pointer-events: none;

    transition: 0.2s ease;

}

.login-input input {

    width: 100%;

    height: 51px;

    padding:
        0 45px 0 44px;

    color: var(--white);

    background:
        rgba(0, 0, 0, 0.45);

    border:

        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    font-size: 13px;

    transition: 0.25s ease;

}

.login-input input::placeholder {
    color: #4e5a62;
}

.login-input input:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(0, 191, 255, 0.08),
        0 0 18px rgba(0, 191, 255, 0.08);

}

.login-input input:focus+* {
    color: var(--blue);
}


/* ==========================================================
   PASSWORD TOGGLE
========================================================== */

.password-toggle {

    position: absolute;

    right: 8px;

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    background: transparent;

    color: var(--muted);

    font-size: 16px;

}

.password-toggle:hover {
    color: var(--blue);
}


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

.login-button {

    width: 100%;

    height: 52px;

    margin-top: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

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

    border-radius: 10px;

    background:
        linear-gradient(110deg,
            #a9002c,
            #ff1744 48%,
            #d00034);

    color: var(--white);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

    box-shadow:
        0 0 18px rgba(255, 23, 68, 0.18);

    transition: 0.25s ease;

}

.login-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(255, 23, 68, 0.40),
        0 10px 30px rgba(255, 23, 68, 0.15);

}

.login-button i {

    font-size: 16px;

    transition: 0.25s ease;

}

.login-button:hover i {
    transform: translateX(4px);
}


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

.login-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 26px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    color: var(--muted-2);

    font-size: 10px;

}

.login-footer i {
    color: var(--blue);
}


/* ==========================================================
   ADMIN WRAPPER
========================================================== */

.admin-wrapper {

    min-height: 100vh;

    display: flex;

    background:
        linear-gradient(135deg,
            var(--black),
            var(--black-2));

}


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

.sidebar {

    width: 255px;

    min-height: 100vh;

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(180deg,
            #080d12,
            #030507);

    border-right:
        1px solid rgba(0, 191, 255, 0.10);

    box-shadow:
        10px 0 45px rgba(0, 0, 0, 0.35);

}


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

.sidebar-logo {

    height: 86px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px 20px;

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

    position: relative;

}

.sidebar-logo::after {

    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--red),
            var(--blue),
            transparent);

    box-shadow:
        0 0 10px rgba(0, 191, 255, 0.5);

}

.sidebar-logo img {

    width: 190px;

    max-height: 60px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 10px rgba(255, 23, 68, 0.18));

}


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

.sidebar-menu {

    flex: 1;

    padding: 22px 13px;

    overflow-y: auto;

}

.sidebar-menu a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    margin-bottom: 6px;

    border:
        1px solid transparent;

    border-radius: 10px;

    color: #83919b;

    font-size: 13px;

    font-weight: 600;

    transition: 0.22s ease;

}

.sidebar-menu a i {

    width: 20px;

    text-align: center;

    font-size: 17px;

    transition: 0.22s ease;

}

.sidebar-menu a:hover {

    color: var(--white);

    background:
        rgba(0, 191, 255, 0.05);

    border-color:
        rgba(0, 191, 255, 0.12);

    box-shadow:
        inset 3px 0 0 var(--blue);

}

.sidebar-menu a:hover i {
    color: var(--blue);
}


/* ACTIVE */

.sidebar-menu a.active {

    color: var(--white);

    background:
        linear-gradient(90deg,
            rgba(255, 23, 68, 0.13),
            rgba(0, 191, 255, 0.04));

    border-color:
        rgba(255, 23, 68, 0.20);

    box-shadow:
        inset 3px 0 0 var(--red),
        0 0 20px rgba(255, 23, 68, 0.05);

}

.sidebar-menu a.active i {

    color: var(--red);

    text-shadow:
        0 0 10px rgba(255, 23, 68, 0.6);

}


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

.sidebar-bottom {

    padding: 15px 13px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

}

.sidebar-bottom a {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    border-radius: 10px;

    color: #7f8d96;

    font-size: 13px;

    font-weight: 600;

    transition: 0.2s ease;

}

.sidebar-bottom a:hover {

    color: var(--red);

    background:
        rgba(255, 23, 68, 0.06);

}

.sidebar-bottom i {
    font-size: 18px;
}


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

.main-content {

    width: calc(100% - 255px);

    min-height: 100vh;

    margin-left: 255px;

    padding: 30px;

    background:

        radial-gradient(circle at 80% 5%,
            rgba(0, 191, 255, 0.045),
            transparent 25%),

        radial-gradient(circle at 20% 90%,
            rgba(255, 23, 68, 0.035),
            transparent 25%);

}


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

.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

}

.topbar h1 {

    color: var(--white);

    font-size: 28px;

    font-weight: 800;

    letter-spacing: -0.5px;

}

.topbar p {

    margin-top: 6px;

    color: var(--muted);

    font-size: 13px;

}


/* ==========================================================
   ADMIN PROFILE
========================================================== */

.admin-profile {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 7px 12px 7px 7px;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 30px;

}

.profile-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--white);

    background:
        linear-gradient(135deg,
            var(--red),
            var(--blue));

    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.20);

}

.admin-profile strong {

    display: block;

    color: var(--white);

    font-size: 12px;

}

.admin-profile small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;

}


/* ==========================================================
   QUICK ACTIONS
========================================================== */

.quick-actions {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 17px;

    margin-bottom: 24px;

}

.action-card {

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            var(--panel),
            var(--black-3));

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

    border-radius: 13px;

    transition: 0.25s ease;

}

.action-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(180deg,
            var(--red),
            var(--blue));

}

.action-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(0, 191, 255, 0.22);

    box-shadow:
        var(--blue-glow);

}

.action-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--white);

    background:
        linear-gradient(135deg,
            rgba(255, 23, 68, 0.20),
            rgba(0, 191, 255, 0.12));

    border:
        1px solid rgba(255, 255, 255, 0.08);

}

.action-card strong {

    display: block;

    color: var(--white);

    font-size: 13px;

}

.action-card span {

    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

}


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

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 17px;

    margin-bottom: 25px;

}

.stat-card {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 21px;

    min-height: 105px;

    background:
        linear-gradient(145deg,
            #10171e,
            #080c10);

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

    border-radius: 14px;

    transition: 0.25s ease;

}

.stat-card::after {

    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    bottom: -40px;

    border-radius: 50%;

    background:
        rgba(0, 191, 255, 0.07);

    filter: blur(15px);

}

.stat-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(0, 191, 255, 0.22);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.30),
        0 0 20px rgba(0, 191, 255, 0.06);

}

.stat-icon {

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--blue-bright);

    background:
        rgba(0, 191, 255, 0.08);

    border:
        1px solid rgba(0, 191, 255, 0.16);

    box-shadow:
        inset 0 0 15px rgba(0, 191, 255, 0.04);

}

.stat-card span {

    display: block;

    color: var(--muted);

    font-size: 11px;

}

.stat-card h2 {

    margin-top: 6px;

    color: var(--white);

    font-size: 23px;

    font-weight: 800;

}


/* ==========================================================
   DASHBOARD SECTION
========================================================== */

.dashboard-section {

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #10171e,
            #080c10);

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

    border-radius: 14px;

    box-shadow:
        var(--shadow);

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 20px 21px;

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

}

.section-header h2 {

    color: var(--white);

    font-size: 16px;

    font-weight: 750;

}

.section-header p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

}

.section-header a {

    color: var(--blue);

    font-size: 11px;

    font-weight: 700;

    transition: 0.2s ease;

}

.section-header a:hover {

    color: var(--blue-bright);

    text-shadow:
        0 0 8px rgba(0, 229, 255, 0.5);

}


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

.table-wrapper {

    width: 100%;

    overflow-x: auto;

}

table {

    width: 100%;

    border-collapse: collapse;

    min-width: 700px;

}

th,
td {

    padding: 15px 20px;

    text-align: left;

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

    font-size: 12px;

}

th {

    color: var(--muted);

    background:
        rgba(0, 0, 0, 0.18);

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}

td {

    color: #aebbc3;

}

tbody tr {

    transition: 0.2s ease;

}

tbody tr:hover {

    background:
        rgba(0, 191, 255, 0.025);

}

td strong {

    color: var(--white);

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state {

    text-align: center !important;

    padding: 55px 20px !important;

}

.empty-state i {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    border-radius: 14px;

    color: var(--blue);

    background:
        rgba(0, 191, 255, 0.06);

    border:
        1px solid rgba(0, 191, 255, 0.12);

    font-size: 25px;

}

.empty-state p {

    margin-top: 12px;

    color: var(--white);

    font-size: 13px;

    font-weight: 700;

}

.empty-state span {

    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

}


/* ==========================================================
   GENERIC BUTTONS
   FOR FUTURE MODULES
========================================================== */

.btn {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 0 17px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 700;

    border: 1px solid transparent;

    transition: 0.22s ease;

}


/* RED BUTTON */

.btn-red {

    color: var(--white);

    background:
        linear-gradient(135deg,
            var(--red),
            var(--red-dark));

    border-color:
        var(--red);

    box-shadow:
        0 0 15px rgba(255, 23, 68, 0.12);

}

.btn-red:hover {

    box-shadow:
        0 0 25px rgba(255, 23, 68, 0.28);

    transform: translateY(-1px);

}


/* BLUE BUTTON */

.btn-blue {

    color: var(--white);

    background:
        linear-gradient(135deg,
            var(--blue-dark),
            var(--blue));

    border-color:
        var(--blue);

    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.12);

}

.btn-blue:hover {

    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.28);

    transform: translateY(-1px);

}


/* OUTLINE */

.btn-outline {

    color: var(--blue);

    background:
        rgba(0, 191, 255, 0.04);

    border-color:
        rgba(0, 191, 255, 0.30);

}

.btn-outline:hover {

    color: var(--white);

    background:
        rgba(0, 191, 255, 0.10);

    box-shadow:
        var(--blue-glow);

}


/* ==========================================================
   FUTURE FORM ELEMENTS
========================================================== */

.form-control,
.form-select {

    width: 100%;

    height: 45px;

    padding: 0 13px;

    color: var(--white);

    background:
        #080d12;

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

    border-radius: 9px;

    outline: none;

    font-size: 12px;

    transition: 0.2s ease;

}

.form-control::placeholder {
    color: #4f5c64;
}

.form-control:focus,
.form-select:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px rgba(0, 191, 255, 0.07),
        0 0 15px rgba(0, 191, 255, 0.06);

}

.form-label {

    display: block;

    margin-bottom: 7px;

    color: var(--white-soft);

    font-size: 11px;

    font-weight: 700;

}


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

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 800;

}

.badge-red {

    color: #ff6f8b;

    background:
        rgba(255, 23, 68, 0.09);

    border:
        1px solid rgba(255, 23, 68, 0.20);

}

.badge-blue {

    color: #56dfff;

    background:
        rgba(0, 191, 255, 0.08);

    border:
        1px solid rgba(0, 191, 255, 0.18);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 1000px) {

    .sidebar {

        width: 78px;

    }

    .sidebar-logo img {

        width: 52px;

        object-fit: cover;

        object-position: left;

    }

    .sidebar-menu a,
    .sidebar-bottom a {

        justify-content: center;

        padding-left: 10px;
        padding-right: 10px;

    }

    .sidebar-menu span,
    .sidebar-bottom span {

        display: none;

    }

    .main-content {

        width: calc(100% - 78px);

        margin-left: 78px;

    }

}


@media (max-width: 800px) {

    .main-content {

        padding: 22px 18px;

    }

    .quick-actions {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .main-content {

        padding: 18px 14px;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .topbar {

        align-items: flex-start;

    }

    .topbar h1 {

        font-size: 23px;

    }

    .admin-profile {

        padding-right: 7px;

    }

    .admin-profile>div:last-child {

        display: none;

    }

    .section-header {

        padding: 17px;

    }

    .login-card {

        padding: 32px 22px;

    }

}


@media (max-width: 430px) {

    .sidebar {

        width: 64px;

    }

    .main-content {

        width: calc(100% - 64px);

        margin-left: 64px;

    }

    .sidebar-logo {

        padding: 10px;

    }

    .sidebar-logo img {

        width: 45px;

    }

    .topbar {

        margin-bottom: 20px;

    }

    .topbar p {

        font-size: 11px;

    }

    .action-card {

        padding: 15px;

    }

    .stat-card {

        padding: 17px;

    }

}

/* ==========================================================
   ADMIN FOOTER
========================================================== */

.admin-footer {

    margin-top: 28px;

    padding: 18px 5px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    color: var(--muted);

    font-size: 10px;

}


.footer-left,
.footer-right {

    display: flex;

    align-items: center;

    gap: 9px;

}


.footer-left strong {

    color: var(--white);

}


.footer-divider {

    color: var(--red);

    text-shadow:
        0 0 8px rgba(255, 23, 68, 0.7);

}


/* SYSTEM STATUS */

.system-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #8f9ca4;

}


.status-dot {

    width: 6px;
    height: 6px;

    display: inline-block;

    border-radius: 50%;

    background: #00e676;

    box-shadow:
        0 0 6px rgba(0, 230, 118, 0.8),
        0 0 12px rgba(0, 230, 118, 0.35);

    animation:
        statusPulse 2s infinite;

}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }

}


.footer-version {

    padding: 4px 8px;

    border:
        1px solid rgba(0, 191, 255, 0.16);

    border-radius: 5px;

    color: var(--blue);

    background:
        rgba(0, 191, 255, 0.04);

}


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

@media (max-width: 600px) {

    .admin-footer {

        flex-direction: column;

        align-items: center;

        text-align: center;

        padding-bottom: 15px;

    }

}

/* ==========================================================
   BILLING SEARCHABLE ITEM DROPDOWN
========================================================== */

.item-search-box {
    position: relative;
    width: 100%;
}


.item-search-input {
    width: 100%;
    cursor: text;
}


.item-search-results {
    display: none;

    position: absolute;

    top: calc(100% + 5px);
    left: 0;
    right: 0;

    max-height: 260px;

    overflow-y: auto;

    background: #080d12;

    border: 1px solid rgba(0, 191, 255, .35);

    border-radius: 10px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .55),

        0 0 20px rgba(0, 191, 255, .08);

    z-index: 9999;
}


.item-search-results.show {
    display: block;
}


.item-search-result {
    padding: 11px 13px;

    cursor: pointer;

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

    transition:
        background .2s ease,
        padding-left .2s ease;
}


.item-search-result:last-child {
    border-bottom: 0;
}


.item-search-result:hover {
    background:
        rgba(0, 191, 255, .08);

    padding-left: 17px;
}


.search-item-name {
    color: #fff;

    font-size: 12px;

    font-weight: 600;
}


.search-item-meta {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-top: 4px;

    color: #6f7e88;

    font-size: 10px;
}


.search-item-meta span {
    color: #00e5ff;

    font-weight: 700;
}


.no-item-result {
    padding: 15px;

    color: #7d8b95;

    text-align: center;

    font-size: 11px;
}