/* Mobile-only floating arrow */
.mobile-back-arrow {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
    background: #0d6efd;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: all 0.3s ease;
}

/* Hover / tap effect */
.mobile-back-arrow:active {
    transform: scale(0.9);
    background: #0b5ed7;
}

/* Hide on desktop */
@media (min-width: 768px) {
    .mobile-back-arrow {
        display: none;
    }
}


/* Fade animation */
#page-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

#page-content.show {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
}

.mobile-nav a {
    font-size: 22px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
}

.mobile-nav a:active {
    transform: scale(0.8);
}

/* Hide on desktop */
@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

/* Prevent content hiding behind nav */
body {
    padding-bottom: 70px;
}

.dark-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
    border: none;
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
}

/* Dark mode styles */
body.dark-mode {
    background: #121212;
    color: #ffffff;
}

body.dark-mode .mobile-nav {
    background: #1e1e1e;
}

body.dark-mode a {
    color: #fff;
}


.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px;
}

.app-card {
    background: #0d6efd;
    color: #fff;
    border-radius: 15px;
    padding: 30px 10px;
    font-size: 24px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.app-card span {
    font-size: 14px;
    margin-top: 10px;
}

.app-card:active {
    transform: scale(0.95);
}

/* Dark mode */
body.dark-mode .app-card {
    background: #1f1f1f;
}

 body {
            background-color: #f8f9fa;
        }

        .dashboard-container {
            height: 100vh;
        }

        .card-option {
            transition: 0.3s;
            cursor: pointer;
        }

        .card-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .icon {
            font-size: 40px;
        }

        


.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px;
}

.app-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border-radius: 20px;
    padding: 30px 10px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}

.app-card span {
    font-size: 14px;
    margin-top: 10px;
}

.app-card:active {
    transform: scale(0.95);
}

/* Icon size */
.app-card i {
    font-size: 32px;
}

/* Dark mode */
body.dark-mode .app-card {
    background: #1f1f1f;
}        




.ripple {
    position: relative;
    overflow: hidden;
}

.ripple span.ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    background: rgba(255,255,255,0.5);
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* Page animation */
#page-content{opacity:0;transform:translateY(10px);transition:0.4s}
#page-content.show{opacity:1;transform:translateY(0)}

/* Mobile arrow */
.mobile-back-arrow{
position:fixed;top:15px;left:15px;width:45px;height:45px;
background:#0d6efd;color:#fff;border-radius:50%;
display:flex;align-items:center;justify-content:center;
text-decoration:none;z-index:9999;
}

/* Bottom nav */
.mobile-nav{
position:fixed;bottom:0;width:100%;height:60px;
background:#fff;display:flex;justify-content:space-around;
align-items:center;z-index:9999;
}
@media(min-width:768px){.mobile-nav{display:none}}
body{padding-bottom:70px}