/* ==========================
   PROFILE PAGE
========================== */

.page-title{
    font-size:var(--fs-xl);
    color:var(--text);
    margin-bottom:calc(var(--unit) * 6);
}

/* FORM */

.profile-form{

    background:var(--surface);
    border:1px solid var(--border);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    padding:calc(var(--unit) * 8);

}

.form-group{

    display:flex;
    flex-direction:column;

    margin-bottom:calc(var(--unit) * 5);

}

.form-group label{

    color:var(--text);
    font-size:var(--fs-sm);

    margin-bottom:calc(var(--unit) * 2);

}

.form-group input{

    width:100%;

    padding:calc(var(--unit) * 3.5);

    background:var(--surface-2);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    color:var(--text);

    font-size:var(--fs-md);

    transition:var(--transition);

}

.form-group input::placeholder{

    color:var(--text-soft);

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary);

    background:var(--surface);

    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);

}

/* SUCCESS */

.success-alert{

    margin-bottom:calc(var(--unit) * 5);

    padding:calc(var(--unit) * 4);

    border-radius:var(--radius-sm);

    background:color-mix(in srgb, var(--green) 12%, var(--surface));

    border:1px solid color-mix(in srgb, var(--green) 35%, var(--border));

    color:var(--text);

}

/* BUTTON */

.save-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    cursor:pointer;

    padding:calc(var(--unit) * 3.5) calc(var(--unit) * 7);

    border-radius:var(--radius-sm);

    background:var(--primary);

    color:#fff;

    font-size:var(--fs-md);

    transition:var(--transition);

}

.save-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.save-btn i{

    font-size:18px;

}

/* ==========================
   MOBILE
========================== */

@media (max-width:600px){

    .profile-form{

        padding:calc(var(--unit) * 5);

    }

    .save-btn{

        width:100%;

    }

}



.table-actions i{
    font-size: 32px;
}

.table-actions{
    display: flex;
    gap: 16px;
}