/* =========================================================
   GLOBAL DARK MODE
========================================================= */

/* =========================================================
   MYBLOG - COMPLETE DARK MODE FIX
   Put this CSS LAST, before </head>
   ========================================================= */

/* =========================================================
   PROFILE.PHP — FINAL DARK MODE
   This MUST be the LAST CSS block in profile.php
   ========================================================= */

/* =========================================================
   NEXA DASHBOARD
   COMPLETE DARK MODE
   ========================================================= */


/* ---------------------------------------------------------
   THEME VARIABLES
   --------------------------------------------------------- */

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;

    --dark-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;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

html.dark-mode .dashboard-nav {
    background: rgba(36, 37, 38, .98) !important;
    color: var(--dark-text) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .dashboard-brand {
    color: #4599ff !important;
}

html.dark-mode .nav-circle {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--dark-border) !important;
}

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


/* ---------------------------------------------------------
   MAIN CONTAINER
   --------------------------------------------------------- */

html.dark-mode .dashboard-container {
    background: transparent !important;
}


/* ---------------------------------------------------------
   PROFILE CARD
   --------------------------------------------------------- */

html.dark-mode .profile-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, .35) !important;
}


/* ---------------------------------------------------------
   PROFILE COVER
   --------------------------------------------------------- */

html.dark-mode .profile-cover {
    background:
        linear-gradient(
            135deg,
            #145dcc,
            #5937bd
        ) !important;
}


/* ---------------------------------------------------------
   PROFILE INFO
   --------------------------------------------------------- */

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

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

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

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

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

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


/* ---------------------------------------------------------
   PROFILE PHOTO
   --------------------------------------------------------- */

html.dark-mode .profile-photo {
    background: var(--dark-card-2) !important;
    border-color: var(--dark-card) !important;
}


/* ---------------------------------------------------------
   PROFILE BUTTONS
   --------------------------------------------------------- */

html.dark-mode .profile-btn {
    border: 1px solid transparent !important;
}

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

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

html.dark-mode .profile-btn-secondary {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

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


/* ---------------------------------------------------------
   STATISTICS
   --------------------------------------------------------- */

html.dark-mode .stat-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, .25) !important;
}

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

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

html.dark-mode .stat-icon {
    background: #263b58 !important;
    color: var(--dark-blue) !important;
}


/* ---------------------------------------------------------
   DASHBOARD CARDS
   --------------------------------------------------------- */

html.dark-mode .dashboard-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, .25) !important;
}

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


/* ---------------------------------------------------------
   QUICK ACTIONS
   --------------------------------------------------------- */

html.dark-mode .quick-action {
    background: transparent !important;
    color: var(--dark-text) !important;
    border: 0 !important;
}

html.dark-mode .quick-action:hover {
    background: var(--dark-card-2) !important;
    color: #fff !important;
}

html.dark-mode .quick-action-icon {
    background: var(--dark-card-2) !important;
    color: var(--dark-blue) !important;
}

html.dark-mode .quick-action:hover .quick-action-icon {
    background: var(--dark-hover) !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   WALLET
   --------------------------------------------------------- */

html.dark-mode .wallet-card {
    background:
        linear-gradient(
            135deg,
            #1877f2,
            #0055c7
        ) !important;

    color: #fff !important;
}

html.dark-mode .wallet-label {
    color: #fff !important;
}

html.dark-mode .wallet-amount {
    color: #fff !important;
}

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


/* ---------------------------------------------------------
   POINTS
   --------------------------------------------------------- */

html.dark-mode .points-box {
    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, .25) !important;
}

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

html.dark-mode .points-box .stat-label {
    color: var(--dark-secondary) !important;
}

html.dark-mode .points-box a {
    color: var(--dark-blue) !important;
}


/* ---------------------------------------------------------
   RECENT POSTS
   --------------------------------------------------------- */

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

html.dark-mode .post-item:last-child {
    border-bottom-color: transparent !important;
}

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

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

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

html.dark-mode .post-item > div[style*="color"] {
    color: var(--dark-muted) !important;
}


/* ---------------------------------------------------------
   EMPTY POSTS MESSAGE
   --------------------------------------------------------- */

html.dark-mode .dashboard-card div[style*="text-align:center"] {
    color: var(--dark-secondary) !important;
}


/* ---------------------------------------------------------
   INLINE TEXT COLORS
   --------------------------------------------------------- */

/*
   Your HTML contains inline styles such as:

   color:#65676b;
   color:#444;
   color:#050505;

   Override them in dark mode.
*/

html.dark-mode [style*="color:#65676b"],
html.dark-mode [style*="color: #65676b"] {
    color: var(--dark-secondary) !important;
}

html.dark-mode [style*="color:#444"],
html.dark-mode [style*="color: #444"] {
    color: var(--dark-secondary) !important;
}

html.dark-mode [style*="color:#050505"],
html.dark-mode [style*="color: #050505"] {
    color: var(--dark-text) !important;
}


/* ---------------------------------------------------------
   BOOTSTRAP
   --------------------------------------------------------- */

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

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

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

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


/* ---------------------------------------------------------
   ICONS
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

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

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


/* ---------------------------------------------------------
   AVATAR CAMERA
   --------------------------------------------------------- */

html.dark-mode .avatar-camera {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

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


/* ---------------------------------------------------------
   GENERAL BUTTONS
   --------------------------------------------------------- */

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

html.dark-mode button:hover {
    color: #fff;
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

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

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-blue) !important;
    outline: none !important;
}

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


/* ---------------------------------------------------------
   DROPDOWNS
   --------------------------------------------------------- */

html.dark-mode .dropdown-menu {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}

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

html.dark-mode .dropdown-item:hover {
    background: var(--dark-card-2) !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   MODALS
   --------------------------------------------------------- */

html.dark-mode .modal-content {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

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

html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ---------------------------------------------------------
   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: 600px) {

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

    html.dark-mode .profile-card,
    html.dark-mode .stat-card,
    html.dark-mode .dashboard-card,
    html.dark-mode .points-box {
        background: var(--dark-card) !important;
    }

    html.dark-mode .profile-cover {
        height: 140px;
    }
}


        * {
            box-sizing: border-box;
        }


        body {
            margin: 0;
            background: #f0f2f5;
            color: #050505;
            font-family:
                Arial,
                Helvetica,
                sans-serif;
        }


        /*
        |--------------------------------------------------------------------------
        | TOP NAV
        |--------------------------------------------------------------------------
        */

        .dashboard-nav {

            position: sticky;

            top: 0;

            z-index: 1000;

            height: 64px;

            background: #fff;

            border-bottom:
                1px solid #ddd;

            display: flex;

            align-items: center;

            padding:
                0 20px;

        }


        .dashboard-brand {

            font-size: 22px;

            font-weight: 800;

            color: #1877f2;

            text-decoration: none;

        }


        .dashboard-nav-right {

            margin-left: auto;

            display: flex;

            gap: 8px;

        }


        .nav-circle {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #e4e6eb;

            border: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #050505;

            text-decoration: none;

        }


        /*
        |--------------------------------------------------------------------------
        | CONTAINER
        |--------------------------------------------------------------------------
        */

        .dashboard-container {

            max-width: 1200px;

            margin: 25px auto;

            padding:
                0 15px;

        }


        /*
        |--------------------------------------------------------------------------
        | PROFILE CARD
        |--------------------------------------------------------------------------
        */

        .profile-card {

            background: #fff;

            border-radius: 12px;

            overflow: hidden;

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

            margin-bottom: 20px;

        }


        .profile-cover {

            height: 180px;

            background:
                linear-gradient(
                    135deg,
                    #1877f2,
                    #6a5acd
                );

        }


        .profile-info {

            padding:
                0 25px 25px;

            position: relative;

        }


        .profile-photo {

            width: 120px;

            height: 120px;

            border-radius: 50%;

            object-fit: cover;

            border:
                5px solid #fff;

            margin-top: -60px;

            background: #fff;

        }


        .profile-name {

            font-size: 25px;

            font-weight: 700;

            margin-top: 8px;

        }


        .profile-username {

            color: #65676b;

        }


        .profile-bio {

            margin-top: 10px;

            color: #444;

            max-width: 700px;

        }


        .profile-meta {

            display: flex;

            flex-wrap: wrap;

            gap: 18px;

            margin-top: 15px;

            color: #65676b;

            font-size: 14px;

        }


        .profile-actions {

            margin-top: 20px;

            display: flex;

            gap: 10px;

            flex-wrap: wrap;

        }


        .profile-btn {

            border: 0;

            padding:
                10px 18px;

            border-radius: 8px;

            font-weight: 600;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            gap: 7px;

        }


        .profile-btn-primary {

            background: #1877f2;

            color: #fff;

        }


        .profile-btn-secondary {

            background: #e4e6eb;

            color: #050505;

        }


        /*
        |--------------------------------------------------------------------------
        | STATISTICS
        |--------------------------------------------------------------------------
        */

        .stats-grid {

            display: grid;

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

            gap: 15px;

            margin-bottom: 20px;

        }


        .stat-card {

            background: #fff;

            border-radius: 12px;

            padding: 20px;

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

        }


        .stat-icon {

            width: 45px;

            height: 45px;

            border-radius: 50%;

            background: #e7f0ff;

            color: #1877f2;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

            margin-bottom: 10px;

        }


        .stat-number {

            font-size: 25px;

            font-weight: 700;

        }


        .stat-label {

            color: #65676b;

            font-size: 14px;

        }


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

        .dashboard-grid {

            display: grid;

            grid-template-columns:
                1fr 1.7fr;

            gap: 20px;

        }


        .dashboard-card {

            background: #fff;

            border-radius: 12px;

            padding: 20px;

            margin-bottom: 20px;

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

        }


        .dashboard-card h3 {

            font-size: 19px;

            margin:
                0 0 15px;

        }


        /*
        |--------------------------------------------------------------------------
        | QUICK ACTIONS
        |--------------------------------------------------------------------------
        */

        .quick-action {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 12px;

            color: #050505;

            text-decoration: none;

            border-radius: 8px;

        }


        .quick-action:hover {

            background: #f0f2f5;

        }


        .quick-action-icon {

            width: 42px;

            height: 42px;

            border-radius: 50%;

            background: #e4e6eb;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #1877f2;

        }


        /*
        |--------------------------------------------------------------------------
        | WALLET
        |--------------------------------------------------------------------------
        */

        .wallet-card {

            background:
                linear-gradient(
                    135deg,
                    #1877f2,
                    #0055c7
                );

            color: #fff;

            border-radius: 12px;

            padding: 22px;

            margin-bottom: 20px;

        }


        .wallet-label {

            opacity: .8;

            font-size: 14px;

        }


        .wallet-amount {

            font-size: 30px;

            font-weight: 700;

            margin:
                5px 0 15px;

        }


        .points-box {

            background: #fff;

            border-radius: 12px;

            padding: 20px;

            margin-bottom: 20px;

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

        }


        .points-number {

            color: #1877f2;

            font-size: 30px;

            font-weight: 700;

        }


        /*
        |--------------------------------------------------------------------------
        | POSTS
        |--------------------------------------------------------------------------
        */

        .post-item {

            padding:
                15px 0;

            border-bottom:
                1px solid #eee;

        }


        .post-item:last-child {

            border-bottom: 0;

        }


        .post-content {

            font-size: 15px;

            /* white-space: pre-wrap; */

            margin-bottom: 12px;

        }


        .post-meta {

            display: flex;

            gap: 15px;

            color: #65676b;

            font-size: 13px;

        }


        .post-meta span {

            display: inline-flex;

            gap: 4px;

            align-items: center;

        }


        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media (max-width: 900px) {

            .stats-grid {

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

            }


            .dashboard-grid {

                grid-template-columns:
                    1fr;

            }

        }


        @media (max-width: 600px) {

            .dashboard-nav {

                padding:
                    0 12px;

            }


            .dashboard-container {

                margin-top: 12px;

                padding:
                    0 8px;

            }


            .profile-cover {

                height: 140px;

            }


            .profile-photo {

                width: 100px;

                height: 100px;

                margin-top: -50px;

            }


            .profile-info {

                padding:
                    0 15px 20px;

            }


            .profile-name {

                font-size: 22px;

            }


            .stats-grid {

                gap: 8px;

            }


            .stat-card {

                padding: 15px;

            }


            .stat-number {

                font-size: 21px;

            }


            .stat-label {

                font-size: 12px;

            }

        }