/* =========================================================
   NEXA FRIENDS — DARK MODE
   ========================================================= */

html.dark-mode {
    color-scheme: dark;

    --dark-bg: #18191a;
    --dark-card: #242526;
    --dark-card-2: #3a3b3c;
    --dark-hover: #4e4f50;
    --dark-border: #3e4042;

    --dark-text: #e4e6eb;
    --dark-secondary: #b0b3b8;
    --dark-muted: #8b949e;

    --nexa-blue: #4599ff;
}


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

html.dark-mode,
html.dark-mode body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-mode body {
    min-height: 100vh;
}


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

html.dark-mode .topbar {
    background: var(--dark-card) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

html.dark-mode .brand {
    color: var(--nexa-blue) !important;
}

html.dark-mode .top-button {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .top-button:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;
}

html.dark-mode .top-button:active {
    background: #505152 !important;
}


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

html.dark-mode .friends-container {
    color: var(--dark-text) !important;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

html.dark-mode .page-header {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .page-header h1 {
    color: var(--dark-text) !important;
}

html.dark-mode .page-header h1 i {
    color: var(--nexa-blue) !important;
}

html.dark-mode .page-header p {
    color: var(--dark-secondary) !important;
}


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

html.dark-mode .tabs {
    background: var(--dark-card) !important;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .tab {
    color: var(--dark-secondary) !important;
}

html.dark-mode .tab:hover {
    background: var(--dark-card-2) !important;
    color: var(--nexa-blue) !important;
}

html.dark-mode .tab.active {
    background: rgba(69, 153, 255, .16) !important;
    color: var(--nexa-blue) !important;
}

html.dark-mode .badge-count {
    background: #e41e3f !important;
    color: #fff !important;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

html.dark-mode .search-box {
    background: var(--dark-card) !important;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .search-form input {
    background: var(--dark-card-2) !important;

    color: var(--dark-text) !important;

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

html.dark-mode .search-form input::placeholder {
    color: var(--dark-muted) !important;
}

html.dark-mode .search-form input:focus {
    background: var(--dark-card-2) !important;

    color: var(--dark-text) !important;

    border-color: var(--nexa-blue) !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(69, 153, 255, .20) !important;
}

html.dark-mode .search-form button {
    background: #1877f2 !important;
    color: #fff !important;
}

html.dark-mode .search-form button:hover {
    background: #166fe5 !important;
}


/* =========================================================
   PERSON CARD
   ========================================================= */

html.dark-mode .person-card {
    background: var(--dark-card) !important;

    color: var(--dark-text) !important;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .40) !important;
}


/* =========================================================
   PERSON COVER
   ========================================================= */

html.dark-mode .person-cover {
    background:
        linear-gradient(
            135deg,
            #145dbf,
            #315f9e
        ) !important;
}


/* =========================================================
   PERSON PHOTO
   ========================================================= */

html.dark-mode .person-photo {
    border-color: var(--dark-card) !important;

    background: var(--dark-card-2) !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .45) !important;
}


/* =========================================================
   PERSON INFO
   ========================================================= */

html.dark-mode .person-info {
    color: var(--dark-text) !important;
}

html.dark-mode .person-name {
    color: var(--dark-text) !important;
}

html.dark-mode .person-username {
    color: var(--dark-secondary) !important;
}


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

html.dark-mode .action-button {
    color: var(--dark-text);
}


/* BLUE BUTTON */

html.dark-mode .btn-blue {
    background: #1877f2 !important;
    color: #fff !important;
}

html.dark-mode .btn-blue:hover {
    background: #166fe5 !important;
    color: #fff !important;
}

html.dark-mode .btn-blue:active {
    background: #145fc7 !important;
}


/* LIGHT BUTTON */

html.dark-mode .btn-light {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

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

html.dark-mode .btn-light:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;
}


/* DANGER BUTTON */

html.dark-mode .btn-danger-light {
    background: rgba(220, 53, 69, .16) !important;

    color: #ff7b86 !important;

    border: 1px solid rgba(220, 53, 69, .25) !important;
}

html.dark-mode .btn-danger-light:hover {
    background: rgba(220, 53, 69, .25) !important;

    color: #ff9aa3 !important;
}


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

html.dark-mode .empty {
    background: var(--dark-card) !important;

    color: var(--dark-secondary) !important;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .empty i {
    color: var(--dark-secondary) !important;
}

html.dark-mode .empty h4 {
    color: var(--dark-text) !important;
}

html.dark-mode .empty p {
    color: var(--dark-secondary) !important;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

html.dark-mode .bg-white {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .text-dark {
    color: var(--dark-text) !important;
}

html.dark-mode .text-secondary {
    color: var(--dark-secondary) !important;
}

html.dark-mode .text-muted {
    color: var(--dark-secondary) !important;
}

html.dark-mode .border {
    border-color: var(--dark-border) !important;
}


/* =========================================================
   ALERT
   ========================================================= */

html.dark-mode .alert-danger {
    background: rgba(220, 53, 69, .15) !important;

    color: #ff8b94 !important;

    border: 1px solid rgba(220, 53, 69, .30) !important;
}


/* =========================================================
   ALL LINKS
   ========================================================= */

html.dark-mode a {
    color: inherit;
}


/* =========================================================
   BUTTON FOCUS
   ========================================================= */

html.dark-mode button:focus,
html.dark-mode a:focus {
    outline: none;
}


/* =========================================================
   SWEETALERT2
   ========================================================= */

html.dark-mode .swal2-popup {
    background: var(--dark-card) !important;

    color: var(--dark-text) !important;

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

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .65) !important;
}

html.dark-mode .swal2-title {
    color: var(--dark-text) !important;
}

html.dark-mode .swal2-html-container,
html.dark-mode .swal2-content {
    color: var(--dark-secondary) !important;
}

html.dark-mode .swal2-icon.swal2-warning {
    border-color: #facc15 !important;
    color: #facc15 !important;
}

html.dark-mode .swal2-icon.swal2-error {
    border-color: #f87171 !important;
    color: #f87171 !important;
}

html.dark-mode .swal2-icon.swal2-success {
    border-color: #4ade80 !important;
    color: #4ade80 !important;
}

html.dark-mode .swal2-confirm {
    background: #1877f2 !important;
    color: #fff !important;
}

html.dark-mode .swal2-cancel {
    background: var(--dark-card-2) !important;

    color: var(--dark-text) !important;

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

html.dark-mode .swal2-cancel:hover {
    background: var(--dark-hover) !important;
}


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

html.dark-mode * {
    scrollbar-color:
        #4e4f50
        #18191a;
}

html.dark-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode *::-webkit-scrollbar-track {
    background: #18191a;
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background: #4e4f50;
    border-radius: 10px;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #666;
}


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

@media (max-width: 650px) {

    html.dark-mode .friends-container {
        background: var(--dark-bg) !important;
    }

    html.dark-mode .page-header {
        border-radius: 12px;
    }

    html.dark-mode .tabs {
        border-radius: 12px;
    }

    html.dark-mode .search-box {
        border-radius: 12px;
    }

    html.dark-mode .person-card {
        border-radius: 12px;
    }

}


/* =========================================================
   MOBILE SMALL SCREEN
   ========================================================= */

@media (max-width: 400px) {

    html.dark-mode .person-card {
        border-radius: 12px;
    }

}

/* end dark mode */

        * {
            box-sizing: border-box;
        }


        body {

            margin: 0;

            background: #f0f2f5;

            color: #050505;

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

        }


        /*
        |--------------------------------------------------------------------------
        | TOPBAR
        |--------------------------------------------------------------------------
        */

        .topbar {

            height: 64px;

            background: #fff;

            border-bottom:
                1px solid #ddd;

            display: flex;

            align-items: center;

            padding:
                0 20px;

            position: sticky;

            top: 0;

            z-index: 1000;

        }


        .brand {

            color: #1877f2;

            font-size: 24px;

            font-weight: 800;

            text-decoration: none;

        }


        .top-actions {

            margin-left: auto;

            display: flex;

            gap: 8px;

        }


        .top-button {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #e4e6eb;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #050505;

            text-decoration: none;

        }


        /*
        |--------------------------------------------------------------------------
        | MAIN
        |--------------------------------------------------------------------------
        */

        .friends-container {

            max-width: 1100px;

            margin:
                25px auto;

            padding:
                0 15px;

        }


        /*
        |--------------------------------------------------------------------------
        | HEADER
        |--------------------------------------------------------------------------
        */

        .page-header {

            background: #fff;

            padding: 25px;

            border-radius: 14px;

            margin-bottom: 15px;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

        }


        .page-header h1 {

            margin: 0;

            font-size: 28px;

            font-weight: 800;

        }


        .page-header p {

            color: #65676b;

            margin:
                5px 0 0;

        }


        /*
        |--------------------------------------------------------------------------
        | TABS
        |--------------------------------------------------------------------------
        */

        .tabs {

            background: #fff;

            border-radius: 14px;

            padding: 8px;

            display: flex;

            gap: 5px;

            margin-bottom: 15px;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

            overflow-x: auto;

        }


        .tab {

            padding:
                11px 17px;

            border-radius: 8px;

            text-decoration: none;

            color: #65676b;

            font-weight: 700;

            white-space: nowrap;

        }


        .tab:hover {

            background: #f0f2f5;

            color: #1877f2;

        }


        .tab.active {

            background: #e7f3ff;

            color: #1877f2;

        }


        .badge-count {

            background: #e41e3f;

            color: #fff;

            border-radius: 20px;

            font-size: 10px;

            padding:
                2px 6px;

            margin-left: 3px;

        }


        /*
        |--------------------------------------------------------------------------
        | SEARCH
        |--------------------------------------------------------------------------
        */

        .search-box {

            background: #fff;

            border-radius: 14px;

            padding: 15px;

            margin-bottom: 15px;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

        }


        .search-form {

            display: flex;

            gap: 10px;

        }


        .search-form input {

            flex: 1;

            min-height: 46px;

            border: 1px solid #ddd;

            border-radius: 25px;

            padding:
                0 18px;

            outline: none;

        }


        .search-form button {

            width: 50px;

            border: 0;

            border-radius: 50%;

            background: #1877f2;

            color: #fff;

        }


        /*
        |--------------------------------------------------------------------------
        | GRID
        |--------------------------------------------------------------------------
        */

        .people-grid {

            display: grid;

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

            gap: 15px;

        }


        /*
        |--------------------------------------------------------------------------
        | PERSON CARD
        |--------------------------------------------------------------------------
        */

        .person-card {

            background: #fff;

            border-radius: 14px;

            overflow: hidden;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

        }


        .person-cover {

            height: 90px;

            background:
                linear-gradient(
                    135deg,
                    #1877f2,
                    #8ab4f8
                );

        }


        .person-photo-wrap {

            display: flex;

            justify-content: center;

            margin-top:
                -45px;

        }


        .person-photo {

            width: 90px;

            height: 90px;

            border-radius: 50%;

            object-fit: cover;

            border:
                4px solid #fff;

            background: #eee;

        }


        .person-info {

            padding:
                10px 14px 15px;

            text-align: center;

        }


        .person-name {

            font-weight: 800;

            font-size: 16px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }


        .person-username {

            color: #65676b;

            font-size: 13px;

            margin-top: 3px;

        }


        .person-actions {

            display: grid;

            grid-template-columns:
                1fr;

            gap: 7px;

            margin-top: 13px;

        }


        .person-actions form {

            margin: 0;

        }


        .action-button {

            width: 100%;

            min-height: 38px;

            border: 0;

            border-radius: 8px;

            font-weight: 700;

        }


        .btn-blue {

            background: #1877f2;

            color: #fff;

        }


        .btn-light {

            background: #e4e6eb;

            color: #050505;

        }


        .btn-danger-light {

            background: #ffe8e8;

            color: #c62828;

        }


        /*
        |--------------------------------------------------------------------------
        | EMPTY
        |--------------------------------------------------------------------------
        */

        .empty {

            background: #fff;

            border-radius: 14px;

            padding: 60px 20px;

            text-align: center;

            color: #65676b;

            box-shadow:
                0 1px 3px
                rgba(0,0,0,.12);

        }


        .empty i {

            font-size: 50px;

        }


        /*
        |--------------------------------------------------------------------------
        | MOBILE
        |--------------------------------------------------------------------------
        */

        @media (
            max-width: 900px
        ) {

            .people-grid {

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

            }

        }


        @media (
            max-width: 650px
        ) {

            .friends-container {

                margin-top: 10px;

                padding:
                    0 10px;

            }


            .people-grid {

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

                gap: 10px;

            }


            .page-header {

                padding: 18px;

            }


            .page-header h1 {

                font-size: 24px;

            }


            .topbar {

                padding:
                    0 12px;

            }


            .top-actions {

                gap: 5px;

            }

        }


        @media (
            max-width: 400px
        ) {

            .people-grid {

                grid-template-columns:
                    1fr;

            }

        }