/* ===== Global Dark Mode ===== */

html.dark-mode,
html.dark-mode body {
    background: #1b1d21 !important;
    color: #e4e4e4 !important;
}

    /* Base text */
    html.dark-mode,
    html.dark-mode p,
    html.dark-mode span,
    html.dark-mode li,
    html.dark-mode label,
    html.dark-mode small {
        color: #e4e4e4 !important;
    }

        /* Links */
        html.dark-mode a {
            color: #eadfff;
        }

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

        /* Layout shell */
        html.dark-mode main,
        html.dark-mode .container,
        html.dark-mode .container-fluid {
            background: transparent !important;
        }

        /* ===== Navbar ===== */

        html.dark-mode .navbar {
            background-color: #1b1d21 !important;
            border-color: #333 !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        }

            html.dark-mode .navbar-brand,
            html.dark-mode .navbar .nav-link,
            html.dark-mode .navbar .dropdown-toggle,
            html.dark-mode .theme-toggle,
            html.dark-mode .theme-toggle .form-check-label,
            html.dark-mode .navbar .nav-link.active {
                color: #f3f4f6 !important;
                opacity: 1 !important;
            }

                html.dark-mode .navbar .nav-link:hover,
                html.dark-mode .navbar .dropdown-toggle:hover,
                html.dark-mode .navbar-brand:hover {
                    color: #eadfff !important;

                }
        html.dark-mode .manage-nav-list .nav-link.active,
        html.dark-mode .manage-nav-list .nav-link[aria-current="page"] {
            background-color: #2a2f36 !important;
            color: #ffffff !important;
            border: 1px solid #5d6470 !important;
            border-radius: 10px;
        }
        html.dark-mode .manage-nav-list .nav-link:hover,
        html.dark-mode .manage-nav-list .nav-link:focus {
            background-color: #2a2f36 !important;
            color: #ffffff !important;
            border: 1px solid #5d6470 !important;
            border-radius: 10px;
        }

        html.dark-mode .navbar-toggler {
            border-color: #555;
        }

            html.dark-mode .navbar-toggler:focus,
            .navbar-toggler:focus {
                box-shadow: 0 0 0 0.2rem rgba(234, 223, 255, 0.18) !important;
                border-color: #cdbbf7 !important;
            }

        /* ===== Dropdowns ===== */

        html.dark-mode .dropdown-menu {
            background-color: #181a1d !important;
            border: 1px solid #2a2f36 !important;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        }

        html.dark-mode .dropdown-item {
            color: #e5e7eb !important;
        }

            html.dark-mode .dropdown-item:hover,
            html.dark-mode .dropdown-item:focus {
                background-color: #242931 !important;
                color: #ffffff !important;
            }

        /* ===== Headings ===== */

        html.dark-mode h1,
        html.dark-mode h2,
        html.dark-mode h3,
        html.dark-mode h4,
        html.dark-mode h5,
        html.dark-mode h6,
        html.dark-mode .section-title,
        html.dark-mode .blog-title,
        html.dark-mode .blog-details-title,
        html.dark-mode .manage-shell-title {
            color: #e5e7eb !important;
        }

        /* Hero / branded page headings */
        html.dark-mode .hero-title,
        html.dark-mode .about-title,
        html.dark-mode .editor-title {
            color: #181a1d !important;
        }

        html.dark-mode .hero-subtitle,
        html.dark-mode .about-subtitle,
        html.dark-mode .editor-subtitle,
        html.dark-mode .blog-details-info {
            color: #181a1d !important;
        }
        html.dark-mode .about-badge,
        html.dark-mode .editor-badge {
            color: #181a1d !important;
        }
        html.dark-mode .manage-shell-subtitle,
        html.dark-mode .text-muted {
            color: #181a1d !important;
        }
        html.dark-mode .blog-author-badge {
            color: #181a1d !important;
        }
        html.dark-mode .blog-author-badge {
            color: #181a1d !important;
        }
        html.dark-mode .blog-meta{
            color: #eadfff !important;
        }
        htmldark-mode .dashboard-subtitle {
            color: #000!important;
        }

        /* ===== Cards / surfaces ===== */

        html.dark-mode .card,
        html.dark-mode .blog-article,
        html.dark-mode .tutorial-details-card,
        html.dark-mode .single-preview-wrapper,
        html.dark-mode .manage-page .editor-card,
        html.dark-mode .manage-nav-card,
        html.dark-mode .image-preview-card {
            background-color: #181a1d !important;
            color: #e5e7eb !important;
            border-color: #2a2f36 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        }

        
        html.dark-mode .card-title,
        html.dark-mode .card-text,
        html.dark-mode .card-header,
        html.dark-mode .card-footer,
        html.dark-mode .blog-content,
        html.dark-mode .blog-content p,
        html.dark-mode .blog-content li,
        html.dark-mode .blog-details-title,
        html.dark-mode .manage-shell-title,
        html.dark-mode .manage-shell-subtitle {
            color: #e4e4e4 !important;
        }

        html.dark-mode .card-header,
        html.dark-mode .card-footer {
            background-color: #181818 !important;
            border-color: #333 !important;
        }

        /* Links inside dark surfaces */
        html.dark-mode .card a,
        html.dark-mode .footer a,
        html.dark-mode .blog-content a {
            color: #e5e7eb !important;
        }

            html.dark-mode .card a:hover,
            html.dark-mode .footer a:hover,
            html.dark-mode .blog-content a:hover {
                color: #eadfff !important;
            }

        /* ===== Forms ===== */
        html.dark-mode p.text.text-muted.mb-2 {
            color: #e5e7eb !important;
        }
        html.dark-mode .form-control,
        html.dark-mode .form-select,
        html.dark-mode input,
        html.dark-mode textarea,
        html.dark-mode select {
            background-color: #1b1f24 !important;
            color: #e5e7eb !important;
            border-color: #3a404a !important;
        }

            html.dark-mode .form-control::placeholder,
            html.dark-mode textarea::placeholder {
                color: #9a9a9a !important;
            }

            html.dark-mode .form-control:focus,
            html.dark-mode .form-select:focus,
            html.dark-mode input:focus,
            html.dark-mode textarea:focus,
            html.dark-mode select:focus {
                background-color: #1b1f24 !important;
                color: #e5e7eb !important;
                border-color: #cdbbf7 !important;
                box-shadow: 0 0 0 0.2rem rgba(234, 223, 255, 0.16) !important;
            }
        /* ===== Buttons ===== */

        /* Primary buttons */

        html.dark-mode .btn-primary,
        html.dark-mode .manage-page .btn-primary {
            background: #1B1D21 !important;
            border-color: #eadfff !important;
            color: #ffffff !important;
        }

            html.dark-mode .btn-primary:hover,
            html.dark-mode .btn-primary:focus,
            html.dark-mode .btn-primary:active,
            html.dark-mode .manage-page .btn-primary:hover,
            html.dark-mode .manage-page .btn-primary:focus,
            html.dark-mode .manage-page .btn-primary:active {
                background: #2a2f36 !important;
                border-color: #8b93a1 !important;
                color: #ffffff !important;
                box-shadow: none !important;
            }

        /* Other solid buttons */
        html.dark-mode .btn-success,
        html.dark-mode .btn-danger {
            color: #ffffff !important;
        }

            html.dark-mode .btn-success:hover,
            html.dark-mode .btn-success:focus,
            html.dark-mode .btn-success:active,
            html.dark-mode .btn-danger:hover,
            html.dark-mode .btn-danger:focus,
            html.dark-mode .btn-danger:active {
                color: #ffffff !important;
                background: #2a2f36 !important;
            }

        /* Outline buttons */
        html.dark-mode .btn-outline-secondary,
        html.dark-mode .btn-outline-primary,
        html.dark-mode .btn-outline-danger {
            color: #e5e7eb !important;
            border-color: #5d6470 !important;
            background-color: transparent !important;
        }

            html.dark-mode .btn-outline-secondary:hover,
            html.dark-mode .btn-outline-secondary:focus,
            html.dark-mode .btn-outline-secondary:active,
            html.dark-mode .btn-outline-primary:hover,
            html.dark-mode .btn-outline-primary:focus,
            html.dark-mode .btn-outline-primary:active,
            html.dark-mode .btn-outline-danger:hover,
            html.dark-mode .btn-outline-danger:focus,
            html.dark-mode .btn-outline-danger:active {
                background-color: #2a2f36 !important;
                border-color: #8b93a1 !important;
                color: #fff !important;
                box-shadow: none !important;
            }



        /* Card buttons / Read More */
        html.dark-mode .card .btn,
        html.dark-mode .card .btn-primary,
        html.dark-mode .card .btn-success,
        html.dark-mode .card .btn-danger,
        html.dark-mode .card .btn-outline-primary:hover,
        html.dark-mode .card .btn-outline-secondary:hover,
        html.dark-mode .card .btn-outline-danger:hover,
        html.dark-mode .card .btn-outline-primary:focus,
        html.dark-mode .card .btn-outline-secondary:focus,
        html.dark-mode .card .btn-outline-danger:focus {
            color: #ffffff !important;
        }

        /* ===== Dark mode auth buttons ===== */

        html.dark-mode .auth-btn,
        html.dark-mode .navbar .auth-btn,
        html.dark-mode .navbar-nav .auth-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: 38px !important;
            padding: 6px 14px !important;
            border-radius: 10px !important;
            border: 1px solid #ffffff !important;
            background-color: transparent !important;
            background-image: none !important;
            color: #ffffff !important;
            line-height: 1 !important;
            box-shadow: none !important;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

            html.dark-mode .auth-btn span {
                display: inline-flex;
                align-items: center;
                height: 100%;
                color: inherit !important;
            }

            html.dark-mode .auth-btn:hover,
            html.dark-mode .auth-btn:focus,
            html.dark-mode .auth-btn:active {
                background-color: #2a2f36 !important;
                border-color: #ffffff !important;
                color: #ffffff !important;
                box-shadow: none !important;
                transform: translateY(-1px);
                text-decoration: none;
                color: #fff;
            }

        html.dark-mode .auth-btn-icon {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            min-height: 18px !important;
            object-fit: contain;
            display: inline-block;
            flex-shrink: 0;
        }

        html.dark-mode button.auth-btn {
            appearance: none;
            -webkit-appearance: none;
        }
        /* ===== Badges ===== */

        html.dark-mode .card .blog-badge,
        html.dark-mode .card .blog-new-badge,
        html.dark-mode .card .tutorial-difficulty-badge,
        html.dark-mode .card .about-tag {
            color: #2f2a35 !important;
        }

        html.dark-mode .card .blog-badge {
            background-color: #f4f1ff !important;
        }

        html.dark-mode .card .blog-new-badge {
            background-color: #d9f8ff !important;
            color: #355b63 !important;
        }

        html.dark-mode .card .tutorial-difficulty-badge,
        html.dark-mode .card .about-tag {
            background-color: #f6f1ff !important;
            color: #2f2a35 !important;
        }

        /* ===== Footer ===== */

        html.dark-mode .footer,
        html.dark-mode footer {
            background-color: #1b1d21 !important;
            color: #b8b8b9 !important;
            border-top: 1px solid #333 !important;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        }

            html.dark-mode footer a {
                color: #9ecbff !important;
            }

        /* ===== Borders / separators ===== */

        html.dark-mode .border-top,
        html.dark-mode .border-bottom,
        html.dark-mode hr {
            border-color: #333 !important;
        }

        /* ===== Utilities ===== */

        html.dark-mode .scroll-to-top-btn {
            background: #2a2a2a;
            color: #f1f1f1;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        }

            html.dark-mode .scroll-to-top-btn:focus {
                box-shadow: 0 0 0 4px rgba(158, 203, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.35);
            }

        html.dark-mode .text-danger {
            color: #ff7b7b !important;
        }

        /* ===== Form switch / toggle ===== */

        html.dark-mode .form-check-input,
        .form-check-input {
            background-color: #6b7280;
            border-color: #6b7280;
            box-shadow: none !important;
        }

            html.dark-mode .form-check-input:checked,
            .form-check-input:checked {
                background-color: #eadfff !important;
                border-color: #eadfff !important;
                box-shadow: none !important;
                background-image: none !important;
            }

            html.dark-mode .form-check-input:focus,
            .form-check-input:focus {
                border-color: #cdbbf7 !important;
                box-shadow: 0 0 0 0.2rem rgba(234, 223, 255, 0.18) !important;
            }
        /* =========================
   Froala Editor — Dark Mode
   ========================= */

        html.dark-mode .fr-box.fr-basic,
        html.dark-mode .fr-box.fr-basic .fr-wrapper,
        html.dark-mode .fr-box.fr-basic .fr-element {
            background: #1f242b !important;
            color: #f3f4f6 !important;
            border-color: #3a4049 !important;
        }

        /* Main editor container */
        html.dark-mode .fr-box {
            background: #1f242b !important;
            border: 1px solid #3a4049 !important;
            border-radius: 12px !important;
            overflow: hidden;
        }

        /* Toolbar */
        html.dark-mode .fr-toolbar {
            background: #262c34 !important;
            border-bottom: 1px solid #3a4049 !important;
            color: #f3f4f6 !important;
        }

        /* Second toolbar row if present */
        html.dark-mode .fr-second-toolbar {
            background: #262c34 !important;
            border-top: 1px solid #3a4049 !important;
            border-bottom: none !important;
        }

        /* Toolbar buttons */
        html.dark-mode .fr-toolbar .fr-command.fr-btn,
        html.dark-mode .fr-popup .fr-command.fr-btn,
        html.dark-mode .fr-more-toolbar .fr-command.fr-btn {
            color: #e5e7eb !important;
            background: transparent !important;
        }

            /* Toolbar button hover / active */
            html.dark-mode .fr-toolbar .fr-command.fr-btn:hover,
            html.dark-mode .fr-toolbar .fr-command.fr-btn:focus,
            html.dark-mode .fr-toolbar .fr-command.fr-btn.fr-active,
            html.dark-mode .fr-popup .fr-command.fr-btn:hover,
            html.dark-mode .fr-popup .fr-command.fr-btn:focus,
            html.dark-mode .fr-popup .fr-command.fr-btn.fr-active,
            html.dark-mode .fr-more-toolbar .fr-command.fr-btn:hover,
            html.dark-mode .fr-more-toolbar .fr-command.fr-btn:focus,
            html.dark-mode .fr-more-toolbar .fr-command.fr-btn.fr-active {
                background: #2a2f36 !important;
                color: #ffffff !important;
                border-radius: 8px !important;
            }

        /* Toolbar icons */
        html.dark-mode .fr-toolbar .fr-svg path,
        html.dark-mode .fr-popup .fr-svg path,
        html.dark-mode .fr-more-toolbar .fr-svg path {
            fill: #e5e7eb !important;
        }

        html.dark-mode .fr-toolbar .fr-command.fr-btn:hover .fr-svg path,
        html.dark-mode .fr-toolbar .fr-command.fr-btn.fr-active .fr-svg path,
        html.dark-mode .fr-popup .fr-command.fr-btn:hover .fr-svg path,
        html.dark-mode .fr-popup .fr-command.fr-btn.fr-active .fr-svg path,
        html.dark-mode .fr-more-toolbar .fr-command.fr-btn:hover .fr-svg path,
        html.dark-mode .fr-more-toolbar .fr-command.fr-btn.fr-active .fr-svg path {
            fill: #ffffff !important;
        }

        /* Editor area */
        html.dark-mode .fr-wrapper {
            background: #1f242b !important;
        }

        html.dark-mode .fr-element {
            background: #1f242b !important;
            color: #f3f4f6 !important;
            caret-color: #ffffff !important;
        }

            /* Placeholder */
            html.dark-mode .fr-element.fr-view p,
            html.dark-mode .fr-element p,
            html.dark-mode .fr-element li,
            html.dark-mode .fr-element h1,
            html.dark-mode .fr-element h2,
            html.dark-mode .fr-element h3,
            html.dark-mode .fr-element h4,
            html.dark-mode .fr-element blockquote {
                color: #f3f4f6 !important;
            }

        html.dark-mode .fr-placeholder {
            color: #9ca3af !important;
        }

        /* Popups / dropdowns */
        html.dark-mode .fr-popup,
        html.dark-mode .fr-dropdown-list,
        html.dark-mode .fr-more-toolbar {
            background: #262c34 !important;
            border: 1px solid #3a4049 !important;
            color: #f3f4f6 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
        }

            /* Dropdown list items */
            html.dark-mode .fr-dropdown-list .fr-command {
                color: #e5e7eb !important;
            }

                html.dark-mode .fr-dropdown-list .fr-command:hover,
                html.dark-mode .fr-dropdown-list .fr-command:focus,
                html.dark-mode .fr-dropdown-list .fr-command.fr-active {
                    background: #2a2f36 !important;
                    color: #ffffff !important;
                }

            /* Inputs inside Froala popups */
            html.dark-mode .fr-popup input,
            html.dark-mode .fr-popup textarea,
            html.dark-mode .fr-popup select {
                background: #1f242b !important;
                color: #f3f4f6 !important;
                border: 1px solid #4b5563 !important;
            }

                html.dark-mode .fr-popup input::placeholder,
                html.dark-mode .fr-popup textarea::placeholder {
                    color: #9ca3af !important;
                }

            /* Popup action buttons */
            html.dark-mode .fr-popup .fr-buttons .fr-command.fr-btn {
                border-radius: 8px !important;
            }

        /* Code view */
        html.dark-mode .fr-code {
            background: #111827 !important;
            color: #e5e7eb !important;
        }

        /* Status / bottom area */
        html.dark-mode .fr-status-bar {
            background: #262c34 !important;
            border-top: 1px solid #3a4049 !important;
            color: #cbd5e1 !important;
        }

        /* Resizer / borders */
        html.dark-mode .fr-box.fr-basic.fr-top .fr-wrapper {
            border-top: none !important;
        }

        html.dark-mode .fr-box.fr-basic.fr-bottom .fr-wrapper {
            border-bottom: none !important;
        }
        html.dark-mode .btn-outline-danger {
            color: #f3f4f6 !important;
            border-color: #f3f4f6 !important;
            background-color: transparent !important;
        }