html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }

    /* 🌐 Base Layout & Body */
    body {
        margin: 0;
        font-family: 'Segoe UI', sans-serif;
        background-color: #f5f6fa;
    }

    /* 🎯 Sidebar Toggle Button */
    .sidebar-toggle {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 2001;
        width: 45px;
        height: 45px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 📦 Sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        background: linear-gradient(180deg, #2c3e50, #4ca1af);
        color: white;
        padding: 20px;
        overflow-y: auto;
        z-index: 1000;
        transition: left 0.3s ease;
    }

        .sidebar.show {
            left: 0 !important;
        }

        .sidebar h5, .sidebar .profile {
            text-align: center;
        }

            .sidebar .profile img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 3px solid white;
            }

            .sidebar .profile h6 {
                margin-top: 10px;
                font-weight: 500;
            }

        .sidebar a {
            display: flex;
            align-items: center;
            color: #f0f0f0;
            padding: 12px 15px;
            border-radius: 8px;
            text-decoration: none;
            margin-bottom: 8px;
            transition: background 0.3s ease;
        }

            .sidebar a i {
                margin-right: 10px;
                color: #ffc107;
            }

            .sidebar a:hover,
            .sidebar a.active {
                background-color: rgba(255, 255, 255, 0.15);
            }

    /* 🔽 Sidebar Collapse Mode */
    .sidebar-collapse {
        width: 80px !important;
    }

        .sidebar-collapse .profile img,
        .sidebar-collapse .profile h6,
        .sidebar-collapse a span {
            display: none;
        }

    /* 📄 Main Content Area */
    .main {
        margin-left: 260px;
        padding: 30px;
        transition: margin-left 0.3s ease;
    }

    .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    /* 👤 User Dropdown */
    .user-dropdown {
        position: relative;
    }

        .user-dropdown img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
        }

    .user-dropdown-menu {
        position: absolute;
        right: 0;
        top: 45px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        width: 160px;
        display: none;
        z-index: 100;
    }

        .user-dropdown-menu a {
            display: block;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
        }

            .user-dropdown-menu a:hover {
                background: #f0f0f0;
            }

    /* 🌙 Dark Mode */
    body.dark-mode {
        background-color: #1e1e2f;
        color: #e0e0e0;
    }

    .dark-mode .sidebar {
        background: linear-gradient(180deg, #141e30, #243b55);
    }

        .dark-mode .sidebar a {
            color: #cfcfcf;
        }

    .dark-mode .main {
        background-color: #2d2d3b;
        color: #fff;
    }

    .dark-mode .card-box,
    .dark-mode .recent-card {
        background-color: #2c2f4c;
        color: #e0e0e0;
    }

        .dark-mode .card-box small,
        .dark-mode .recent-card small {
            color: #aaa;
        }

        .dark-mode .recent-card .text-primary {
            color: #80bfff !important;
        }

        .dark-mode .recent-card .text-muted {
            color: #bbbbbb !important;
        }

    .dark-mode .text-success {
        color: #63ffb1 !important;
    }

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

    .dark-mode .badge.bg-primary,
    .dark-mode .bg-gradient-amount {
        background: linear-gradient(to right, #5faaff, #007bff);
        color: white;
    }

    /* 📊 Dashboard Cards */
    .card-box,
    .recent-card {
        border-radius: 15px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
        padding: 20px;
        transition: transform 0.3s, background-color 0.3s, color 0.3s;
        background-color: #ffffff;
        color: #000;
    }

        .card-box:hover,
        .recent-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        }

    /* 🔵 Card Icons */
    .card-icon {
        font-size: 2rem;
        border-radius: 50%;
        padding: 10px;
        color: white;
    }

    .bg-blue {
        background: linear-gradient(45deg, #007bff, #00c6ff);
    }

    .bg-green {
        background: linear-gradient(45deg, #28a745, #85ffbd);
    }

    .bg-orange {
        background: linear-gradient(45deg, #fd7e14, #ffb347);
    }

    .bg-red {
        background: linear-gradient(45deg, #dc3545, #ff6f61);
    }

    /* 💰 Amount Badge */
    .bg-gradient-amount {
        background: linear-gradient(to right, #00c6ff, #0072ff);
        color: white;
        font-size: 0.95rem;
        padding: 0.4rem 0.6rem;
        border-radius: 10px;
    }

    /* 🔄 Scrollable Cards (Recent Transactions) */
    .transaction-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-behavior: smooth;
    }

        .transaction-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .transaction-scroll::-webkit-scrollbar-thumb {
            background-color: #bbb;
            border-radius: 10px;
        }

    /* ✨ Animation */
    .animate-fade-in {
        animation: fadeInUp 0.6s ease forwards;
        opacity: 0;
        transform: translateY(20px);
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 📱 Mobile Responsive */
    @media (max-width: 768px) {
        .sidebar {
            left: -260px;
        }

        .main {
            margin-left: 0;
        }
    }

    /* ✅ Mobile View Fix */
    @media (max-width: 768px) {
        .top-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .sidebar-toggle {
            top: 10px;
            left: 10px;
            z-index: 2002;
        }

        .main {
            padding-top: 90px;
        }
    }



    /* ✅ Fix Topbar Layout for Mobile View */
    @media (max-width: 768px) {
        .top-bar {
            flex-direction: row !important;
            gap: 0;
            margin-bottom: 20px;
        }

            .top-bar .col-6:first-child {
                justify-content: flex-start;
                align-items: flex-start;
            }

            .top-bar .col-6:last-child {
                justify-content: flex-end;
                align-items: center;
            }
    }

    .sidebar-dropdown-toggle i.float-end {
        transition: transform 0.3s ease;
    }

    .sidebar-dropdown-toggle.collapsed i.float-end {
        transform: rotate(0deg);
    }

    .sidebar-dropdown-toggle:not(.collapsed) i.float-end {
        transform: rotate(180deg);
    }

    /* Optional: spacing for better alignment */
    .sidebar-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }