.home html{
    min-height: 100%;
}


 body{
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #bde7ff, #eaf8ff);

    color: black;

    align-items: center;
    padding: 20px 40px;
    min-height: 100vh;
    background-attachment: fixed;

    background-color: rgba(255, 255, 255, 0.5);



}

.hero h2{
    color: #2d5cff
}

.home nav h1{
    color: #2d5cff
}

.home nav h1:hover,
.register nav h1:hover,
.dashboardb nav h1:hover, 
.progress nav h1:hover,
.profile nav h1:hover,
.notifications nav h1:hover
{
    color: black;
}

.home nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.home nav a{
    
    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.home nav a:hover{
    color:black;
}
.hero{
    text-align: center;
    padding: 100px 20px; 
}

.categories{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 40px 
}

.card{
    background: white;
    box-sizing: border-box;
    padding: 20px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:center; 
    transition:transform 0.3s ease; 
    width: calc(33.33% - 20px);
    text-decoration:none;
    color: inherit;
   
}

.card h2{
    color: #2d5cff;
    text-decoration:none;
}

.card h2 a{
    text-decoration: none;
    color: #2d5cff;
  }
  
  .card h2 a:hover,
  .card h2 a:visited{
    text-decoration: none;
    color: #2d5cff;
  }

.card:hover{
    transform: translateY(-5px); /* moves card slightly up when hovered */
    box-shadow:0 5px 10px rgb(0,0,0, 0.2);
}

.features{
    padding: 90px 40px
    
}

.feature-box{
    margin-bottom: 30px;
}

.feature-title{
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-box h3{
    margin: 0;
    color: #2d5cff;
    font-weight:bold;
    text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 rgba(255, 255, 255, 0.7);
    
}

.feature-box p{
    margin-bottom: 0;
}


.btn:hover{
    color: #2d5cff

    
}

.d-cards{
 
    box-sizing: border-box;
    padding: 40px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:left; 
    transition:transform 0.3s ease; 
}

.d-cards h2{
    color: #2d5cff;
    text-decoration:none;
    text-align: left;
}

.d-cards h3{
    text-align: center;
    color: #2d5cff;
    font-size: 25px;
    font-weight: bold;
}

.controls{
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.category-filter-help,
.active-category-label,
.empty-goals-message{
    margin: 0 0 16px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.dashboard-select,
.add-goal-form input,
.add-goal-form button{
    width: 100%;
    box-sizing: border-box;
}

.dashboard-select,
.add-goal-form input{
    padding: 12px 14px;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    font-size: 1rem;
    color: #1e293b;
    background: #ffffff;
}

.dashboard-select{
    max-width: 320px;
    cursor: pointer;
}

.dashboard-select:focus,
.add-goal-form input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 0 3px rgba(45, 92, 255, 0.15);
}

.add-goal-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-goal-form button{
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: #2d5cff;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.add-goal-form button:hover{
    background: #1e4ad9;
    transform: translateY(-1px);
}

#goals-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.goal-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e6eefc;
}

.goal-item:last-child{
    border-bottom: none;
}

.goal-label{
    flex: 1;
    font-size: 1rem;
    color: #1e293b;
}

.category-badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.category-academics{
    color: #1d4ed8;
    background: #eaf2ff;
}

.category-fitness{
    color: #15803d;
    background: #ecfdf3;
}

.category-nutrition{
    color: #b45309;
    background: #fff7ed;
}

@media (max-width: 768px){
    .controls{
        grid-template-columns: 1fr;
    }

    .dashboard-select{
        max-width: none;
    }

    .goal-item{
        flex-wrap: wrap;
    }

    .category-badge{
        margin-left: 28px;
    }
}

.quick-stats-layout{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.quick-stats-column p{
    margin: 0;
}

.quick-stats-column:last-child p{
    text-align: right;
}

.stat-item{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.stat-item i{
    width: 18px;
    height: 18px;
    color: #2d5cff;
    flex-shrink: 0;
}

.stat-item-right{
    justify-content: flex-end;
}

.quick-stats-chart{
    width: 180px;
    height: 180px;
}

.dashboardb nav ul,
.register nav ul, 
.login nav ul,
.profile nav ul,
.notifications nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
}

.dashboardb nav a,
.register nav a, 
.login nav a,
.profile nav a,
.notifications nav a{
    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.dashboardb nav a:hover,
.register nav a:hover,
.login nav a:hover,
.profile nav a:hover,
.notifications nav a:hover{
    color:black;
    text-decoration: none;
}

/* Make the same behavior work reliably for visited links + keyboard focus */
body.login header nav a:visited,
body.login header nav a:focus-visible{
    color:#2d5cff;
}

body.login header nav a:hover,
body.login header nav a:focus-visible{
    color:black;
    text-decoration: none;
}

.register nav h1,
.dashboardb nav h1{
    color: #2d5cff;
}

.progress nav h1,
.profile nav h1,
.notifications nav h1{
    color: #2d5cff;
}

.stat-item p{
    font-size: 20px;
    font-weight:bold;
}

.register-container
{
    max-width: 400px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgb(0,0,0, 0.1);
    background: white;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    
}

.register-container form{
    display:flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    font-weight: bold;
}

.register-container form input{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
    font-size: 16px;
    font-weight: bold;
    color: #2d5cff;
    background: white;
}

.register-container .form-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.register-container .form-group label,
.register-container .form-group input{
    width: 100%;
}

.register-container h2{
    color: #2d5cff;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.register-container .form-group input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 5px rgba(45, 92, 255, 0.5);
}


.register-footer a{
    color: #2d5cff;
    text-decoration: none;
    font-weight: bold;
}

.register-footer a:hover{
    color:black;
}

.register-submit{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: #2d5cff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.register-submit:hover{
    background-color: black;
    transform: translateY(-1px);
}

.login-container
{
    max-width: 400px;         
    margin: 0 auto;
    padding: 50px;            
    border-radius: 25px;
    box-shadow: 0 5px 10px rgb(0,0,0, 0.1);
    background: white;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    
}

.login-submit{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: #2d5cff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.login-container h2{
    color: #2d5cff;
    font-size: 30px;           
    font-weight: bold;
    margin-bottom: 10px;
}

.login-container .form-group input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 5px rgba(45, 92, 255, 0.5);
}

/* Keep login form styling consistent with register */
.login-container form{
    display:flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    font-weight: bold;
}

.login-container form input{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
    font-size: 16px;
    font-weight: bold;
    color: #2d5cff;
    background: white;
}

.login-container .form-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.login-container .form-group label,
.login-container .form-group input{
    width: 100%;
}

.progress nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.progress nav a{
    
    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.progress nav a:hover{
    color:black;
}



.progress-summary{
 
    box-sizing: border-box;
    padding: 40px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:left; 
    transition:transform 0.3s ease; 
}

.progress-summary h2{
    color: #2d5cff;
    text-decoration:none;
    text-align: left;
}

.progress-summary h3{
    text-align: center;
    color: #2d5cff;
    font-size: 25px;
    font-weight: bold;
}

.progress-design{
    max-width: 1100px;
    margin:0 auto;
    padding: 20px 20px 90px}

.progress-hero{
    text-align: center;
    margin-bottom: 50px;
    }

.progress-hero h2{
    font-size: 3.0em;
}

.progress-hero p{
    font-size: 1.45em;
}

.progress-summary{
    display: flex;
    gap:135px; 
    flex-wrap:wrap;
    margin-bottom: 35px;
}

.summary-card{
    flex: 1 1 240px;
    min-width: 220px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.summary-number{
    margin: 10px 0 8px;
    font-size: 2rem;
    font-weight: bold;
    color: #2d5cff;
}

.summary-notif{
    margin: 0;
    color: #2c3e50;
    line-height: 1.45;
}

.activities{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.activities h3{
    margin-top: 0;
    margin-bottom: 16px;
    color: #2d5cff;
}

.activities table{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.activities th,
.activities td{
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e6eefc;
}

.activities th{
    background: #f4f8ff;
    color: #2d5cff;
    font-weight: 700;
}

.activities tbody tr:hover{
    background: #f9fbff;
}

.status-completed{
    color: #15803d;
    font-weight: bold;
}

.status-in-progress{
    color: #b45309;
    font-weight: bold;
}

.status-not-started{
    color: #6b7280;
    font-weight: bold;
}

.category-progress{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-progress h2{
    margin-top: 0;
    margin-bottom: 20px;
    color: #2d5cff;
    text-transform: capitalize;
}

.progress-items{
    margin-bottom: 18px;
}

.progress-items:last-child{
    margin-bottom: 0;
}

.progress-label{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.progress-bars{
    height: 12px;
    background: #e6eefc;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill{
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.fitness-fill{
    background: #2d5cff;
}

.nutrition-fill{
    background: #15803d;
}

.academics-fill{
    background: #b45309;
}

.progress-update{
    margin-bottom: 24px;
}

.progress-update label{
    font-weight: 600;
    margin-right: 10px;
    color: #2c3e50;
}

.progress-update select{
    padding: 8px 12px;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    background: #ffffff;
    color: #2c3e50;
}

@media (max-width: 768px){
    .progress-design{
        padding: 20px 12px 60px;
    }

    .progress-summary{
        gap: 16px;
    }

    .progress-hero h2{
        font-size: 2.1em;
    }

    .progress-hero p{
        font-size: 1.05em;
    }

    .activities{
        overflow-x: auto;
    }


}

.profile-container{
    max-width:1100px;
    margin:0 auto;
    padding: 50px 20px 90px;
}

.profile-hero{
    text-align: center;
    margin-bottom:50px;

}

.profile-hero h2{
    color: #2d5cff;
    font-size: 3.0rem;
    margin-bottom:10px;

}

.profile-hero p{
    font-size: 1.45rem;
    color:#64748b;
}

.profile-structure{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.profile-card{
    background: white;
    border-radius: 24px;
    padding:30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.profile-card:last-child{
    grid-column: 1 / -1;
}

.profile-card h3{
    color:#2d5cff;
    margin-bottom:25px;
}

.profile-card label:not(.checkbox-row){
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
}

.profile-card input:not([type="checkbox"]),
.profile-card select{
    width:100%;
    box-sizing: border-box;
    padding:10px 12px;
    margin-bottom:20px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    font-size:1rem;
}

.profile-card select{
    max-width: 320px;
}

.profile-card button{
    background: #2d5cff;
    color:white;
    border:none;
    border-radius:12px;
    padding: 12px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 8px;
}

.profile-card button:hover{
    background: #1e4ad9;
}

.checkbox-row{
    display: flex;
    align-items: center;
    gap:12px;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 1rem;
    color: #334155;
}

.checkbox-row input[type="checkbox"]{
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    accent-color: #2d5cff;
}

.notifications-container{
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px 90px;
}

.notification-hero{
    text-align: center;
    margin-bottom: 50px;
}

.notification-hero h2{
    font-size: 50px;
    color:#2d5cff;
    margin-bottom: 10px;
}

.notification-hero p{
    font-size: 1.45rem;
    color:#64748b;
}

.notif-filters{
    display: flex;
    justify-content: center;
    gap:18px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.notif-filters button{
    border: none;
    background: white;
    color:#2d5cff;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.notif-filters button:hover{
    background: #2d5cff;
    color: white;
    transform: translateY(-2px);
}

.notif-filters button.active{
    background: #2d5cff;
    color: white;
}

.notification-empty{
    text-align: center;
    padding: 40px 24px;
    background: white;
    border-radius: 24px;
    color: #64748b;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.notification-list{
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.notification-card{
    display: flex;
    gap:24px;
    align-items: flex-start;
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-left: 8px solid #2d5cff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.notification-icon{
    width:64px;
    height: 64px;
    border-radius: 18px;
    background:#eef6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.notification-card h3{
    color: #1e293b;
    font-size: 28px;
    margin: 0 0 14px;
}

.notification-card p{
    margin: 0 0 14px;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.5;
}

.notification-card span{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
}

.notification-card.upcoming{
    border-left-color: #2d5cff;
}

.notification-card.upcoming span{
    color: #2d5cff;
    background:#eaf2ff;
}

.notification-card.overdue{
    border-left-color: #f97316;
}

.notification-card.overdue .notification-icon{
    background: #fff3e8;
}

.notification-card.overdue span{
    background:#fff3e8;
    color:#f97316;
}

.notification-card.positive{
    border-left-color: #15803d;
}

.notification-card.positive .notification-icon{
    background: #ecfdf3;
}

.notification-card.positive span{
    background: #ecfdf3;
    color:#15803d;
}

@media (max-width: 768px){
    .notification-hero h2{
        font-size:32px;
    }

    .notification-card{
        flex-direction: column;
    }
}

@media (max-width: 768px){
    .profile-structure{
        grid-template-columns: 1fr;
    }

    .profile-card:last-child{
        grid-column: auto;
    }
}