:root {
    --green: #003300;
    --gold: #dabc5e;
}

body {
    background: #f4f6f4;
}

.admin-login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #001b08, #063919);
}

.admin-topbar {
    background: #07150c;
    border-bottom: 4px solid var(--gold);
}

/* --------------------------------------------------------------------------
   Admin layout
   -------------------------------------------------------------------------- */

.admin-sidebar {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    min-height: calc(100vh - 60px);
    background: #0b1e10;
}

/*
 * The main admin page and standalone pages such as /admin/teams/ use
 * Bootstrap's col-lg-10 class. Give the main area a real flex rule so it
 * continues to fill the remaining width even when the browser is zoomed or
 * the CSS viewport falls below Bootstrap's lg breakpoint.
 */
.admin-sidebar + main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */

.admin-nav {
    display: flex;
    align-items: center;
    gap: .25rem;

    width: 100%;
    margin-bottom: .35rem;
    padding: .8rem 1rem;

    border: 0;
    border-radius: .6rem;

    background: transparent;
    color: #dce6dd;

    text-align: left;
    text-decoration: none;

    font-weight: 650;
    line-height: 1.25;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.admin-nav:hover,
.admin-nav:focus,
.admin-nav.active {
    background: #174928;
    color: #fff;
    text-decoration: none;
}

.admin-nav:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.admin-nav i {
    flex: 0 0 1.4rem;
    width: 1.4rem;
    text-align: center;
}

.admin-nav span {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared admin components
   -------------------------------------------------------------------------- */

.admin-card {
    background: #fff;
    border: 1px solid #dfe5e0;
    border-radius: 1rem;
    box-shadow: 0 7px 22px #0000000a;
}

.stat-number {
    color: var(--green);
    font-size: 2rem;
    font-weight: 900;
}

.thumb {
    width: 78px;
    height: 56px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: .4rem;
    background: #fff;
}

.dropzone {
    padding: 1.5rem;
    border: 2px dashed #aab5ac;
    border-radius: .8rem;
    background: #fafcfa;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Tablet
   Keep the navigation vertical. This is especially important at browser
   zoom levels that make a desktop screen report a CSS width under 992px.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) and (min-width: 768px) {
    .admin-sidebar {
        flex: 0 0 240px;
        width: 240px;
        max-width: 240px;
        min-height: calc(100vh - 60px);
    }

    .admin-nav {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   Phones
   The sidebar becomes a horizontal scroll strip only on genuinely small
   screens.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .admin-topbar .container-fluid {
        gap: .5rem;
    }

    .admin-topbar .navbar-brand {
        font-size: 1rem;
    }

    .admin-sidebar {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-height: auto;

        display: flex;
        gap: .35rem;

        padding: .65rem !important;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: thin;
    }

    .admin-nav {
        flex: 0 0 auto;
        width: auto;

        margin-bottom: 0;

        white-space: nowrap;
    }

    .admin-sidebar + main {
        flex: 0 0 100%;
        width: 100%;
    }
}